javascript - AngularJS:独立于$ routeProvider的 Controller 收到ReferenceError

我有一个具有以下html结构的角度应用程序

div[class="ng-view-wrap"]的内容取决于url，但是div[class="login-wrap"]存在于每个页面上，并由rootCtrl处理

由$routeProvider激活的控制器正在工作，但rootCtrl无法工作

如您所见，我什至在ng-controller（rootCtrl作为root）和loggingIn（root.loggedIn）表达式中使用了"root"，以便将范围引用到rootCtrl。

角度错误：参数'rootCtrl'不是一个函数，未定义

HTML：

<div class="ng-view-wrap" ng-view=""></div>

<div class="login-wrap" ng-controller="rootCtrl as root">
    <div class="login">
        <p class="login-status">{{"Status: " + root.loggedIn }}</a>
    </div>
</div>

app.js：

var mspBoard = angular
    .module('mspBoard',['ngRoute'])
    .config(function($routeProvider){
        $routeProvider
            .when('/',
                {
                    controller: 'boardCtrl',
                    templateUrl: 'js/views/board.html'
                })
            .when('/:project',
                {
                    controller: 'projectCtrl',
                    templateUrl: 'js/views/project.html'
                })
            .when('/:project/:topic',
                {
                    controller: 'topicCtrl',
                    templateUrl: 'js/views/topic.html'
                })
            .otherwise({redirectTo: '/'});
    });
mspBoard.controller('rootCtrl',['$scope', function($scope){
    $scope.loggedIn = true;
}]);
mspBoard.controller('boardCtrl',['$scope', function($scope){
    // Do Something
}]);
mspBoard.controller('projectCtrl',['$scope', function($scope){
    // Do Something
}]);
mspBoard.controller('topicCtrl',['$scope', function($scope){
    // Do Something
}]);

最佳答案

您在controller和controller as混合两种语法。

在您的rootCtrl中添加以下行：

this.loggedIn = true;

如果使用的是controller as（这是IMO的正确方法），则在定义控制器时，无需注入this即可将$scope视为控制器的作用域。您需要将$scope注入控制器的唯一原因是利用事件（$ broadcast，$ emit，$ on）或触发摘要循环（$ digest，$ apply）。

我以您的示例代码为基础创建了这个PLNKR作为示例。