控制器不是函数，未定义，同时全局定义控制器

javascript angularjs angularjs-scope angularjs-directive

2022-08-30 04:43:29

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

错误是

错误： [ng：areq] http://errors.angularjs.org/1.3.0-beta.17/ng/areq?p0=ContactController&p1=not%20a%20function%2C%20got%20undefined

它呈现为

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

法典

<!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>

答案 1

使用 Angular 1.3+，您不能再在全局范围上使用全局控制器声明（无需显式注册）。您需要使用语法注册控制器。module.controller

示例：-

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

        };
    }]);

或

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

这是一个重大更改，但可以通过使用 allowGlobals 将其关闭以使用全局变量。

示例：-

angular.module('app')
    .config(['$controllerProvider', function($controllerProvider) {
        $controllerProvider.allowGlobals();
    }]);

以下是来自Angular来源的评论：-

检查具有给定名称的控制器是否通过以下方式注册$controllerProvider

检查在当前作用域上评估字符串是否返回构造函数

如果$controllerProvider#allowGlobals，请检查全局对象（不推荐）window[constructor]window

 .....

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

一些额外的检查：-

确保将 appname 放在你的角根元素（例如：- ）的指令中。示例：- ng-app=“myApp”ng-apphtml
如果一切正常，并且您仍然遇到问题，请记住确保脚本中包含正确的文件。
您没有在不同位置两次定义同一模块，这会导致先前在同一模块上定义的任何实体被清除，示例和在另一个位置再次（当然包括两个脚本）可能会导致模块上先前注册的控制器在第二次重新创建模块时被清除。angular.module('app',[]).controller(..angular.module('app',[]).service(..app

答案 2

我遇到了这个问题，因为我在闭包中包装了一个控制器定义文件：

(function() {
   ...stuff...
});

但是我忘记了实际调用该闭包来执行该定义代码，并实际上告诉Javascript我的控制器存在。即，上述内容需要：

(function() {
   ...stuff...
})();

请注意末尾的（）。