javascript - Controller 不是函数，在全局定义 Controller 时未定义

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

错误是

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

呈现为

Argument 'ContactController' is not a function, got undefined

代码

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

最佳答案

在 Angular 1.3+ 中，你不能再在全局范围内使用全局 Controller 声明(没有显式注册)。您需要使用 module.controller 语法注册 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);

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

例子:-

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

这是 Angular 来源的评论:-

check if a controller with given name is registered via $controllerProvider

check if evaluating the string on the current scope returns a constructor

if $controllerProvider#allowGlobals, check window[constructor] on the global window object (not recommended)

 .....

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

一些额外的检查:-

确保将应用程序名称也放在 Angular 根元素的 ng-app 指令中(例如:- html)。示例:- ng-app="myApp"
如果一切正常但问题仍然存在，请记住确保脚本中包含正确的文件。
您没有在不同的地方两次定义同一个模块，这会导致之前在同一个模块上定义的任何实体被清除，Example angular.module('app',[]).controller (.. 又在另一个地方 angular.module('app',[]).service(.. (当然包括两个脚本)会导致之前注册的 Controller 在模块 app 上，将在第二次重新创建模块时被清除。

关于javascript - Controller 不是函数，在全局定义 Controller 时未定义，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25111831/

javascript - Controller 不是函数，在全局定义 Controller 时未定义

上一篇：javascript - 在 javascript 中，空字符串作为 boolean 值总是 false 吗？

下一篇：javascript - JS 字符串 "+"与 concat 方法