控制器不是函数，未定义，同时全局定义控制器 [英] Controller not a function, got undefined, while defining controllers globally
问题描述
我正在使用 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"不是函数，未定义
代码
<头><script src="../angular.min.js"></script><script type="text/javascript">函数 ContactController($scope) {$scope.contacts = ["abcd@gmail.com", "abcd@yahoo.co.in"];$scope.add = function() {$scope.contacts.push($scope.newcontact);$scope.newcontact = "";};}<身体><h1>模块示例<div ng-controller="ContactController">电子邮件:<input type="text" ng-model="newcontact"><button ng-click="add()">添加</button><h2>联系人</h2><ul><li ng-repeat="联系人中的联系人">{{联系}} </li></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](不推荐)
.....表达式 = 控制器.hasOwnProperty(构造函数)?控制器[构造函数]: getter(locals.$scope, constructor, true) ||(globals ? getter($window, constructor, true) : undefined);一些额外的检查:-
确保将 appname 放在
ng-app指令中的 angular 根元素(例如:-html).示例:- ng-app="myApp"如果一切正常，但问题仍然存在，请记住确保脚本中包含正确的文件.
您没有在不同的地方两次定义同一个模块，这导致之前在同一个模块上定义的任何实体都被清除，示例
angular.module('app',[]).controller(..和另一个地方angular.module('app',[]).service(..(当然包括两个脚本) 可以导致以前注册的控制器在模块app上，将在第二次重新创建模块时清除.
I am writing a sample application using angularjs. i got an error mentioned below on chrome browser.
Error is
Error: [ng:areq] http://errors.angularjs.org/1.3.0-beta.17/ng/areq?p0=ContactController&p1=not%20a%20function%2C%20got%20undefined
Which renders as
Argument 'ContactController' is not a function, got undefined
Code
<!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>
With Angular 1.3+ you can no longer use global controller declaration on the global scope (Without explicit registration). You would need to register the controller using module.controller syntax.
Example:-
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 = "";
};
}]);
or
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);
It is a breaking change but it can be turned off to use globals by using allowGlobals.
Example:-
angular.module('app')
.config(['$controllerProvider', function($controllerProvider) {
$controllerProvider.allowGlobals();
}]);
Here is the comment from Angular source:-
- 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 globalwindowobject (not recommended)
.....
expression = controllers.hasOwnProperty(constructor)
? controllers[constructor]
: getter(locals.$scope, constructor, true) ||
(globals ? getter($window, constructor, true) : undefined);
Some additional checks:-
Do Make sure to put the appname in
ng-appdirective on your angular root element (eg:-html) as well. Example:- ng-app="myApp"If everything is fine and you are still getting the issue do remember to make sure you have the right file included in the scripts.
You have not defined the same module twice in different places which results in any entities defined previously on the same module to be cleared out, Example
angular.module('app',[]).controller(..and again in another placeangular.module('app',[]).service(..(with both the scripts included of course) can cause the previously registered controller on the moduleappto be cleared out with the second recreation of module.
这篇关于控制器不是函数，未定义，同时全局定义控制器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
