控制器不是一个函数，在全局定义控制器时未定义

Controller not a function, got undefined, while defining controllers globally

本文关键字：控制器 全局 定义 未定义 函数 一个      更新时间：2023-09-26

我正在使用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'不是一个函数，得到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+中，你不能再在全局作用域中使用全局控制器声明(没有显式注册)。您需要使用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对象上的window[constructor](不推荐)
 .....
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上先前注册的控制器被清除与第二次重建模块。

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

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

但是我忘记调用闭包来执行定义代码并告诉Javascript我的控制器存在。也就是说，上面的代码应该是:

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

注意末尾的()。

我是一个Angular的初学者，我犯了一个基本的错误，没有在Angular的根元素中包含应用的名称。因此，从

更改代码
<html data-ng-app> 


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

对我有用。@PSL在上面的回答中已经提到了这一点。

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

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

angular.module('myApp', [])

这个检索一个已存在的模块'myApp':

angular.module('myApp')

我在另一个文件中覆盖了我的模块，使用上面的第一个调用创建了另一个模块，而不是像我期望的那样检索。

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

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

我不知道这是一个好的做法，但也许可以帮助另一个。

var app = app;
if(!app) {
    app = angular.module('web', ['ui.bootstrap']);
}
app.controller('SearchCtrl', SearchCtrl);

我有这个问题，当我不小心重新声明myApp:

var myApp = angular.module('myApp',[...]);
myApp.controller('Controller1', ...);
var myApp = angular.module('myApp',[...]);
myApp.controller('Controller2', ...);

重新声明后，Controller1停止工作并引发OP错误。

非常好的建议，除了SAME错误可能仅仅因为缺少根页面上的关键脚本

的例子:

page: index.html 

   np-app="saleApp"
失踪

<script src="./ordersController.js"></script>

当一个Route被告知要提供什么控制器和视图时:

 .when('/orders/:customerId', {
     controller: 'OrdersController',
     templateUrl: 'views/orders.html'
 })

如此重要的未定义控制器问题可能发生在这个意外的错误，甚至没有引用控制器!

当您有一个包含许多模块的大型项目时，也可能发生此错误。确保angular文件中使用的应用(模块)和模板中使用的是一样的，在这个例子中"thisApp"。

app.js 

angular
.module('thisApp', [])
    .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 = "";
        };
    }]);

index . html 

  <html>
    <body ng-app='thisApp' ng-controller='ContactController>
         ...
        <script type="text/javascript" src="assets/js/angular.js"></script>
        <script src="app.js"></script>
    </body>
    </html>

如果所有这些都失败了，你正在使用Gulp或类似的东西…重新运行它!

我浪费了30分钟反复检查每件事，而所需要的只是在裤子上踢一脚。

如果你正在使用路由(大概率)，并且你的配置中有一个未声明为依赖的模块中的控制器的引用，那么初始化也可能失败。

E。假设你已经为你的应用配置了ngRoute，比如

angular.module('yourModule',['ngRoute'])
.config(function($routeProvider, $httpProvider) { ... });

在声明路由的块中要小心，

.when('/resourcePath', { 
templateUrl: 'resource.html',
controller: 'secondModuleController' //lives in secondModule
});

在'ngRoute'之后声明secondModule为依赖项应该可以解决这个问题。我知道我有这个问题。

我得到这个错误是因为我使用的是与我的代码不兼容的旧版本的angular。

在我的例子中，这些错误发生在list.find()函数的语法错误之前;IE11无法识别列表的"find"方法，因此必须用Filter方法替换，该方法适用于IE11和chrome。参考https://github.com/flrs/visavail/issues/19

这个错误，在我的情况下，在IE11中查找列表方法的语法错误之前。按照建议将find方法替换为filter方法https://github.com/flrs/visavail/issues/19

则上述控制器未定义错误解决。

我在使用(不够老的)AngularJS 1.4.3的旧教程时遇到了同样的错误。到目前为止，最简单的解决方案是在

中编辑angular.js source
function $ControllerProvider() {
  var controllers = {},
      globals = false;


function $ControllerProvider() {
  var controllers = {},
      globals = true;
只是按照教程的原样，而不推荐的全局函数只是作为控制器使用。
相关文章：