angularjs控制器功能没有被执行答案

【问题标题】：angularjs controller function is not getting executedangularjs控制器功能没有被执行
【发布时间】：2014-10-25 23:33:38
【问题描述】：

我有一个用于登录的控制器，但我不确定为什么 loginController 中的函数没有被执行。当我通过 Chrome 调试时，我可以看到它正在执行 line (var controllerId = 'login';) 但它没有在函数内执行 line。

我有类似的 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) {

}]);

})();

【问题讨论】：

你需要在 index.html 中为你的控制器声明作用域
您能解释一下如何在 index.html 中声明范围吗？我从来没有这样做过。我的 shellController.js 也可以正常工作。我更新了 index.html 并提供了更多信息。谢谢！

标签： angularjs angularjs-controller

【解决方案1】：

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

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

这意味着控制器和视图是动态加载的，因此您可能仅通过查看 index.html 就没有注意到它

【讨论】：

我的 index.html 中没有 ng-controller="shellController"。我在 shell.html 中有。我有 在 login.html 中。

【解决方案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]);
    })();

见thisplunker

【讨论】：

感谢您的回复。但这无济于事。我可以看到类似 var controllerId = 'login'; 正在执行，但行 ** var vm = this;** 没有在 loginController.js 中执行。在 shellController.js ** var vm = this;** 行被执行。

【解决方案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">

【讨论】：