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

IT技术 javascript angularjs angularjs-directive angularjs-scope
2021-02-06 12:22:28

我正在使用 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>
6个回答

使用 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 inng-app指令放在你的角度根元素（例如：-）上html。示例：- ng-app="myApp"

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

  • 您没有在不同的地方两次定义同一个module，这会导致之前在同一个module上定义的任何实体被清除，示例angular.module('app',[]).controller(..和另一个地方angular.module('app',[]).service(..（当然包括两个脚本）可能会导致之前注册的控制器moduleapp将随着module的第二次重新创建被清除。

如何按照建议进行检查？检查具有给定名称的控制器是否通过 $controllerProvider 注册
2021-03-21 12:22:28
app.register.controller('TheController', TheController); 帮我解决了这个问题。
2021-04-01 12:22:28

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

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

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

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

注意末尾的 ()。

+1 有趣的是，visual studio 似乎有时会自动删除调用。我复制了一个包含此代码的现有 js 文件；原始文件有调用，复制的文件没有。
2021-03-19 12:22:28

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

<html data-ng-app>

到 

<html data-ng-app="myApp">

为我工作。@PSL，在他上面的回答中已经涵盖了这一点。

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

这将创建module“myApp”并覆盖任何名为“myApp”的现有module：

angular.module('myApp', [])

这将检索现有module“myApp”：

angular.module('myApp')

我一直在另一个文件中覆盖我的module，使用上面的第一个调用创建了另一个module，而不是按照我的预期进行检索。

更多细节在这里：https : //docs.angularjs.org/guide/module

在我的例子中，我添加了module，我添加了控制器，但我忘记在应用程序的module列表中添加module。` angular.module("app", [HEREYOURMODULE] ...`
2021-03-12 12:22:28

我只是迁移到 angular 1.3.3，我发现如果当应用程序被覆盖时我在不同的文件中有多个控制器并且我丢失了第一个声明的容器。

我不知道这是否是一种好的做法，但也许对另一种做法有帮助。

var app = app;
if(!app) {
    app = angular.module('web', ['ui.bootstrap']);
}
app.controller('SearchCtrl', SearchCtrl);
其它你可能感兴趣的问题
上一篇如何更改警告框的样式？ 下一篇console.log() 显示值实际更改之前变量的更改值