1

您好，我正在尝试一个带有 Angular 和 UI-Router 的简单应用程序......但由于某种原因，它根本不起作用。

在chrome中，控制台没有错误，但甚至根本没有输出

也许有人对正在发生的事情有一些线索......我绝对不知道。

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <script src="/Scripts/angular.min.js"></script>
    <script src="/Scripts/angular-ui-router.js"></script>
</head>
<body>
    <div>
        <a href="#/media/list">Route 1</a>
        <div ui-view="viewSidebar"></div>
        <div ui-view="viewContent"></div>
    </div>

    <script>
        var app = angular.module('app', ['ui.router']);
        app.config(
          ['$stateProvider', '$urlRouterProvider',
              function ($stateProvider, $urlRouterProvider) {
                  $urlRouterProvider.otherwise('/media/list');
                  $stateProvider.state('mediaList', {
                      views: {
                          url: "/media/list",
                          'viewSidebar': {
                              template: '<p>SideBar</p>',
                              controller: 'SidebarControllerView'
                          },
                          'viewContent': {
                              template: '<p>Thumb view</p>',
                              controller: 'MediaControllerView'
                          }
                      }
                  });
              }]);

        app.controller('MediaControllerView', ['$scope', MediaControllerView]);
        app.controller('SidebarControllerView', ['$scope', SidebarControllerView]);


        function MediaControllerView($scope) {
            $scope.model = 1;
        };


        function SidebarControllerView($scope) {
            $scope.model = 1;
        };


    </script>
</body>
</html>
4

1 回答 1

1

有一个工作的plunker

一个重要的错误设置是 URL。它不属于视图，而是属于状态：

...
$stateProvider.state('mediaList', {
      // url belongs to the state
      url: "/media/list",
      views: {
          // url does not belong to the views
          // url: "/media/list",
          'viewSidebar': {
              template: '<p>SideBar</p>',
              controller: 'SidebarControllerView'
          },
          'viewContent': {
              template: '<p>Thumb view</p>',
              controller: 'MediaControllerView'
          }
      }
  });
  ...

在这里检查

而且，正如DTing发现的那样，我们必须提供ng-app：

<html ng-app="app" ng-strict-di>
  ...

注意：ng-strict-di不是必须的，但是......这是必须的 - 以避免以后的问题......

如果 app 元素上存在此属性，则注入器将以“strict-di”模式创建。这意味着应用程序将无法调用不使用显式函数注释的函数（因此不适合缩小），如依赖注入指南中所述，有用的调试信息将有助于追踪这些错误的根源。

于 2015-04-02T10:52:45.980 回答