首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >控制器不是函数,在全局定义控制器时未定义

控制器不是函数,在全局定义控制器时未定义
EN

Stack Overflow用户
提问于 2014-08-04 12:35:50
回答 14查看 120.6K关注 0票数 127

我正在使用angularjs编写一个示例应用程序。我在chrome浏览器上遇到了下面提到的一个错误。

错误是

错误:ng:areq

,它将呈现为

参数“ContactController”不是函数,未定义

代码

代码语言:javascript
复制
<!DOCTYPE html>
<html ng-app>
<head>
    <script src="../angular.min.js"></script>
    <script type="text/javascript">
        function ContactController($scope) {
            $scope.contacts = ["abcd@gmail.com", "abcd@yahoo.co.in"];

            $scope.add = function() {
                $scope.contacts.push($scope.newcontact);
                $scope.newcontact = "";                 
            };
        }    
    </script>    
</head>

<body>    
    <h1>  modules sample </h1>

    <div ng-controller="ContactController">
        Email:<input type="text" ng-model="newcontact">
        <button ng-click="add()">Add</button>

        <h2> Contacts </h2>
        <ul>
            <li ng-repeat="contact in contacts"> {{contact}} </li>
        </ul>    
    </div>
</body> 
</html>
EN

回答 14

Stack Overflow用户

回答已采纳

发布于 2014-08-04 12:51:04

使用Angular 1.3+,您不能再在全局作用域上使用全局控制器声明(没有显式注册)。您需要使用module.controller语法注册控制器。

示例:-

代码语言:javascript
复制
angular.module('app', [])
    .controller('ContactController', ['$scope', function ContactController($scope) {
        $scope.contacts = ["abcd@gmail.com", "abcd@yahoo.co.in"];

        $scope.add = function() {
            $scope.contacts.push($scope.newcontact);
            $scope.newcontact = "";

        };
    }]);

代码语言:javascript
复制
function ContactController($scope) {
    $scope.contacts = ["abcd@gmail.com", "abcd@yahoo.co.in"];

    $scope.add = function() {
        $scope.contacts.push($scope.newcontact);
        $scope.newcontact = "";
    };
}
ContactController.$inject = ['$scope'];
angular.module('app', []).controller('ContactController', ContactController);

这是一个突破性的变化,但它can be turned off to use globals by using allowGlobals

示例:-

代码语言:javascript
复制
angular.module('app')
    .config(['$controllerProvider', function($controllerProvider) {
        $controllerProvider.allowGlobals();
    }]);

这是来自Angular源码的评论:

如果通过$controllerProvider

  • check注册了具有给定名称的控制器,请检查constructor

  • if $controllerProvider#allowGlobals。如果对当前作用域上的字符串求值返回$controllerProvider

  • check对象,请检查全局window对象(而不是recommended)

)上的window[constructor]

代码语言:javascript
复制
 .....

expression = controllers.hasOwnProperty(constructor)
            ? controllers[constructor]
            : getter(locals.$scope, constructor, true) ||
                (globals ? getter($window, constructor, true) : undefined);

一些额外的检查:

  • 一定要确保把appname in ng-app指令放在你的角度根元素上(例如:- html)。示例:- ng-app="myApp"
  • If一切正常,您仍然遇到问题请记住确保脚本中包含了正确的文件。
  • 您没有在不同的位置定义同一模块两次,这会导致先前在同一模块上定义的任何实体被清除,示例angular.module('app',[]).controller(..,然后在另一个位置再次定义angular.module('app',[]).service(.. (当然包括两个脚本)会导致在模块app上先前注册的控制器在第二次重新创建模块时被清除。
票数 171
EN

Stack Overflow用户

发布于 2015-06-23 14:23:58

我遇到这个问题是因为我把一个控制器定义文件包装在一个闭包中:

代码语言:javascript
复制
(function() {
   ...stuff...
});

但我忘记了实际调用该闭包来执行该定义代码,并实际告诉Javascript我的控制器存在。也就是说,以上内容需要:

代码语言:javascript
复制
(function() {
   ...stuff...
})();

请注意末尾的()。

票数 33
EN

Stack Overflow用户

发布于 2015-10-16 17:23:29

我是Angular的初学者,我犯了一个基本的错误,就是没有在angular的根元素中包含应用程序的名称。因此,将代码从

代码语言:javascript
复制
<html data-ng-app> 

代码语言:javascript
复制
<html data-ng-app="myApp"> 

对我很管用。@PSL,已经在上面的回答中涵盖了这一点。

票数 16
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/25111831

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档