Question

我有一个登录控制器，我不知道为什么loginController中的函数没有被执行。当我通过Chrome调试时，我可以看到它正在执行行（var controllerId =＆＃39; login＆＃39 ;;）但它不会在函数内执行行。

我有类似的shell页面控制器，我可以看到代码在这个控制器的函数内执行。

我想知道是什么让这两个控制器不同。

谢谢！

loginController.js

(function () {
'use strict';
var controllerId = 'login';
angular.module('app').controller(controllerId,
     ['$rootScope', loginController]);

function loginController($rootScope) {
    var vm = this;
    activate();

    function activate() {
    }
};
})();

shellController.js

(function () {
'use strict';
var controllerId = 'shell';
angular.module('app').controller(controllerId,
    ['$rootScope', shellController]);

function shellController($rootScope) {
    var vm = this;

    activate();

    function activate() {
    }

};
})();

的index.html

<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-route.min.js"></script>

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<script src="app/app.js"></script>
<script src="app/layout/controllers/shellController.js"></script>
<script src="app/layout/controllers/topnavController.js"></script>
<script src="app/layout/controllers/sidebarController.js"></script>
<script src="app/security/controllers/loginController.js"></script>

App.js

(function () {
'use strict';

var app = angular.module('app', [
    'ngRoute'
]);

app.constant('routes', getRoutes());
function getRoutes() {
    return [
        {
            url: '/',
            config: {
                templateUrl: 'app/dashboard/dashboard.html',
                title: 'dashboard',
                settings: {
                    nav: 1,
                    content: 'Dashboard'
                }
            }
        }, {
            url: '/login/:redirect*?',
            config: {
                title: 'login',
                templateUrl: 'app/security/views/login.html',
                settings: {
                    content: 'Login'
                }
            }
        }
    ];
}

app.config(['$routeProvider', 'routes', routeConfigurator]);
function routeConfigurator($routeProvider, routes) {
    routes.forEach(function (r) {
        $routeProvider.when(r.url, r.config);
    });
    $routeProvider.otherwise({ redirectTo: '/' });
    var count = routes.length;
}



app.run(['$route', function ($route) {

}]);

})();

Answer 1

查看index.html中的其他位置 - 您是否在任何地方看到ng-controller="shellController"？或者也许在您的app.js中它可能看起来像：

angular.module('app').config('$routeProvider', function($routeProvider) {
  $routeProvider.
    when('/', {
      templateUrl: 'index.html',
      controller: 'shellController'
   ........

这意味着控制器和视图是动态加载的，所以你可能只是通过查看index.html

就没有注意到它

Answer 2

您无法将控制器名称作为变量。请使用以下代码：

loginController.js：

  (function () {
    var controllerId = 'login';
    var loginController=function ($rootScope) {
        var vm = this;
        console.log("mk")
        function activate() {
          console.log("mk");
        }
        activate();
    }

    angular.module('app').controller('login',
         ['$rootScope', loginController]);
    })();

请参阅this plunker

Answer 3

谢谢大家的回答。我想出了我的问题。我的JavaScript根本没有任何问题。我的html文件中有一个错误的错误。在我的login.html中，我有以下代码。

<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main data-ng-controller="login as vm">

我在data-ng-controller之前错过了双引号。我将html更改为以下并且有效。

<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main" data-ng-controller="login as vm">

angularjs控制器功能没有被执行

3 个答案: