小编典典

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

javascript

我正在使用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>

阅读 368

收藏
2020-04-25

共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();
    }]);




 .....

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

一些其他检查:

  • 一定要确保将appname放在ng-app指令中,也要放在您的角根元素(例如:-)上html。例如:-ng-app =“ myApp”

  • 如果一切正常,但仍然遇到问题,请记住确保脚本中包含正确的文件。

  • 您没有在不同的位置定义两次相同的模块,这导致先前在同一模块上定义的任何实体都被清除,例如angular.module('app',[]).controller(..在另一个示例(又angular.module('app',[]).service(..包含两个脚本)中再次出现在示例中可能导致先前在该模块上注册的控制器。模块app的第二次重新创建将清除该模块。

2020-04-25