单独的angularJS控制器导致错误

时间：2016-01-25 11:48:16

标签： javascript html angularjs

我知道过去曾在以下问题中询问过这个问题： How to create separate AngularJS controller files? Separate AngularJS Controllers Into Separate Files

但是我无法纠正这个问题。

我有一个包含以下内容的文件：

var app = angular.module('app',['ngRoute'])
    .config(function($interpolateProvider){
        $interpolateProvider.startSymbol('<%');
        $interpolateProvider.endSymbol('%>');
    });

app.config(function($routeProvider){
    $routeProvider

        .when('/',{
            templateUrl: '/admin/pages/Dashboard',
            controler :'mainController'
        })
        .when("/index",{
            templateUrl: '/admin/pages/Dashboard',
            controler :'mainController'
        })
        .when("/activateLink",{
            templateUrl:'/admin/pages/verifyAccount',
            controller:'mainController'
        });

});

app.controller('mainController',['$scope','$templateCache','$route','$location',function($scope, $templateCache,$route,$location) {
        // create a message to display in our view
        //$scope.message = 'OK';
        //$templateCache.removeAll();
        $scope.clear = function(){
            //console.log("clicked");
            //console.log($route.current.originalPath);
            $( "#ActiveWarning" ).show();
            $templateCache.removeAll();
            $route.reload();
            $location.path( $route.current);
        }

}]);

app.js包含以下代码：

/admin/pages/verifyAccount

页面<div ng-controller="verifyAccountController"><% message %></div> <script> angular.module('app').controller('verifyAccountController', function($scope) { $scope.message="Test!!!!"; }); </script> 包含以下脚本：

Error: [ng:areq] http://errors.angularjs.org/1.4.8/ng/areq?p0=verifyacc&p1=not%20a%20function%2C%20got%20undefined
G/<@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:6:416
qb@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:22:131
Qa@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:22:218
Xe/this.$get</<@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:80:210
w@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:60:177
D@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:61:30
g@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:55:105
g@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:55:1
g@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:55:1
K/<@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:54:249
ngViewFillContentFactory/<.link@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8-route.min.js:985:7
ea@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:73:293
D@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:62:190
g@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:55:105
K/<@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:54:249
R/<@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:56:79
k@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:60:377
update@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8-route.min.js:935:25
lf/this.$get</r.prototype.$broadcast@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:136:157
commitRoute/<@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8-route.min.js:619:15
f/<@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:119:129
lf/this.$get</r.prototype.$eval@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:133:309
lf/this.$get</r.prototype.$digest@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:130:404
lf/this.$get</r.prototype.$apply@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:134:76
g@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:87:442
T@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:92:50
Uf/</w.onload@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:93:78

<div class="content-wrapper ng-scope" ng-controller="mainController" ng-view="">

问题是我收到以下错误：

app.js

但是，如果我在/* angular.module('app').controller('verifyAccountController',['$scope',function($scope) { $scope.message = "TEST!!"; }]); */ /* angular.module('app',['ngRoute']) .controller('verifyAccountController',verifyAccountController); verifyAccountController.$inject = ['$scope']; function verifyAccountController($scope){ $scope.message="Test!!!!"; } */ /* var app = angular.module('app', []); app.controller('verifyAccountController', function($scope) { $scope.message="Test!!!!"; }); angular.module('app', []).controller('verifyAccountController', function($scope) { $scope.message="Test!!!!"; }); */ 而不是'/ admin / pages / verifyAccount'页面中添加控制器'verifyAccountController'，那么它可以正常运行。

我已尝试过链接中描述的所有解决方案，但错误仍然存​​在。

例如我尝试的代码：

Error: [ng:areq] Argument 'verifyAccountController' is not a function, got undefined
http://errors.angularjs.org/1.4.9/ng/areq?p0=verifyAccountController&p1=not%20a%20function%2C%20got%20undefined
minErr/<@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:68:12
assertArg@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:1816:1
assertArgFn@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:1826:1
$ControllerProvider/this.$get</<@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:9356:9
setupControllers@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:8426:36
nodeLinkFn@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:8468:32
compositeLinkFn@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:7929:13
compositeLinkFn@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:7932:13
compositeLinkFn@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:7932:13
publicLinkFn@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:7809:30
ngViewFillContentFactory/<.link@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8-route.min.js:985:7
invokeLinkFn@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:9039:9
nodeLinkFn@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:8533:1
compositeLinkFn@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:7929:13
publicLinkFn@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:7809:30
createBoundTranscludeFn/boundTranscludeFn@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:7947:1
controllersBoundTransclude@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:8560:18
update@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8-route.min.js:935:25
$RootScopeProvider/this.$get</Scope.prototype.$broadcast@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:16573:15
commitRoute/<@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8-route.min.js:619:15
processQueue@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:14991:28
scheduleProcessQueue/<@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:15007:27
$RootScopeProvider/this.$get</Scope.prototype.$eval@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:16251:16
$RootScopeProvider/this.$get</Scope.prototype.$digest@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:16069:15
$RootScopeProvider/this.$get</Scope.prototype.$apply@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:16359:13
done@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:10791:36
completeRequest@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:10989:7
requestLoaded@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:10930:1

<div class="content-wrapper ng-scope" ng-controller="mainController" ng-view="">

我该如何解决这个问题？感谢。

更新

使用未压缩的angularjs进行调试：

{{1}}

2 个答案:

答案 0 :(得分：1)

由于您已经拥有原始app.js，因此可以使用。但不是当控制器在自己的文件中时。您还必须在<script></script>标记中包含新文件。

此外，网址/admin/pages/verifyAccount上的文件不应包含脚本;它是一个模板，只应包含HTML代码。将* .js文件用于其他控制器，并将它们包含在主HTML文件中。

答案 1 :(得分：1)

  1. 要检索角度模块以便将其用于控制​​器注册，您应该使用angular.module('app')语法来检索以前注册的模块，而不是angular.module('app', [...])用于创建< / strong>一个模块。

  2. 您所做的控制器关联不是很清楚。您必须在主HTML文件中选择使用ng-controller="..."语法的全局控制器，或者在$routeProvider配置中关联控制器和视图。

  3. 避免在单个文件中混合使用视图描述（HTML）和控制器定义（JS）。为控制器创建单独的文件，或使用app.js或app.controller('someController',[...])

    4. 将其添加到angular.module('app').controller('someController', [...])
相关问题
最新问题