控制器不是一个功能,未定义,同时全局定义控制器

yok*_*kks 123 javascript angularjs angularjs-directive angularjs-scope

我正在使用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>
Run Code Online (Sandbox Code Playgroud)

PSL*_*PSL 172

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

        };
    }]);
Run Code Online (Sandbox Code Playgroud)

要么

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);
Run Code Online (Sandbox Code Playgroud)

这是一个突破性的变化,但它可以通过使用关闭使用全局变量allowGlobals.

例:-

angular.module('app')
    .config(['$controllerProvider', function($controllerProvider) {
        $controllerProvider.allowGlobals();
    }]);
Run Code Online (Sandbox Code Playgroud)

以下是Angular来源的评论: -

  • 检查具有给定名称的控制器是否通过注册 $controllerProvider
  • 检查评估当前作用域上的字符串是否返回构造函数
  • if $ controllerProvider#allowGlobals,检查window[constructor]全局window对象(不推荐)
 .....

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

一些额外的检查: -

  • 确保将appname放在ng-app指向角度根元素的指令中(例如: - html).示例: - ng-app ="myApp"

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

  • 您没有在不同的位置两次定义相同的模块,这导致先前在同一模块上定义的任何实体被清除,示例angular.module('app',[]).controller(..和另一个地方angular.module('app',[]).service(..(当然包括两个脚本)可能导致先前注册的控制器在模块app的第二次重新创建清除模块.


rog*_*err 33

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

(function() {
   ...stuff...
});
Run Code Online (Sandbox Code Playgroud)

但我忘记了实际调用该闭包执行该定义代码并实际告诉Javascript我的控制器存在.即,以上需要是:

(function() {
   ...stuff...
})();
Run Code Online (Sandbox Code Playgroud)

注意最后的().


Pra*_*ari 16

我是Angular的初学者,我做了一个基本错误,即不在角度根元素中包含app名称.所以,改变代码

<html data-ng-app> 
Run Code Online (Sandbox Code Playgroud)

<html data-ng-app="myApp"> 
Run Code Online (Sandbox Code Playgroud)

为我工作.@PSL已经在上面的答案中涵盖了这一点.


Jak*_*art 8

我有这个错误,因为我不明白之间的差别angular.module('myApp', [])angular.module('myApp').

这将创建模块"myApp"并覆盖任何名为"myApp"的现有模块:

angular.module('myApp', [])

这将检索现有模块"myApp":

angular.module('myApp')

我在另一个文件中覆盖了我的模块,使用上面的第一个调用创建了另一个模块而不是按照我的预期进行检索.

更多细节:https: //docs.angularjs.org/guide/module