javascript - 单独的 AngularJS Controller 导致错误

标签 javascript html angularjs

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

但是我无法纠正该问题。

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

<!DOCTYPE html>
<html ng-app="app">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
{!! HTML::script('libraries/admin/plugins/jQuery/jQuery-2.1.4.min.js') !!}
{!! HTML::script('libraries/JS/jquery-ui-1.11.1/jquery-ui.min.js') !!}

<!-- Bootstrap 3.3.5 -->
{!! HTML::script('libraries/admin/bootstrap/js/bootstrap.min.js') !!}
{!! HTML::script('libraries/JS/parsley/parsley.2.0.7.min.js') !!}
{!! HTML::script('libraries/JS/sweetalert2-master/dist/sweetalert2.min.js') !!}
{!! HTML::script('libraries/JS/angularjs/angular-1.4.8.min.js') !!}
{!! HTML::script('libraries/JS/angularjs/angular-1.4.8-route.min.js') !!}
{!! HTML::script('libraries/MyAngular/app.js') !!
  </head>
  <body>
<div class="content-wrapper"  ng-controller="mainController" ng-view>    
</div><!-- ./wrapper -->
</body>
</html>

app.js 包含以下代码:

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);
        }

}]);

页面/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 中添加 Controller “verifyAccountController”而不是“/admin/pages/verifyAccount”页面，则它可以完美运行。

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

例如我尝试过的代码:

/*
 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!!!!";
});
*/

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

更新

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

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="">

最佳答案

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

  2. 您所做的 Controller 关联不是很清楚。您必须选择使用 ng-controller="..." 拥有全局 Controller 主 HTML 文件中的语法或通过关联 Controller 和 $routeProvider 中的 View 配置。

  3. 避免在单个文件中混合 View 描述 (HTML) 和 Controller 定义 (JS)。为 Controller 创建一个单独的文件，或将其添加到 app.js使用app.controller('someController',[...])或angular.module('app').controller('someController', [...])

关于javascript - 单独的 AngularJS Controller 导致错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34991853/

上一篇：javascript - 查询动画函数调用

下一篇：javascript - jQuery 打印 iframe pdf 适用于本地主机，但不适用于服务器

相关文章：

html - 使用脚本标签模拟 XMP 标签并允许复制内容

javascript - 如何在 <div> 标签中左右浮动元素？

javascript - formly 动态选项中的默认值

angularjs - ng-bind-html 内部输入文本不绑定(bind)

javascript - 单击按钮时未将元素添加到 div

javascript - 如何返回数组中第一个元素的属性值，或者如果没有元素则返回 0？

javascript - 使用 angular2 单击提交按钮时从一个页面导航到另一页面

php - 随机版本号与图像强制缓存

javascript - 在 angular.js 中显示数组

javascript - 无需刷新即可获取 DOM 中的新数据

©2024 IT工具网  联系我们