Javascript 控制器不是函数,在全局定义控制器时未定义
我正在使用angularjs编写一个示例应用程序。我在chrome浏览器上遇到了下面提到的一个错误 错误是 错误:[ng:areq] 它呈现为 参数“ContactController”不是函数,未定义 代码Javascript 控制器不是函数,在全局定义控制器时未定义,javascript,angularjs,angularjs-directive,angularjs-scope,Javascript,Angularjs,Angularjs Directive,Angularjs Scope,我正在使用angularjs编写一个示例应用程序。我在chrome浏览器上遇到了下面提到的一个错误 错误是 错误:[ng:areq] 它呈现为 参数“ContactController”不是函数,未定义 代码 功能控制器($scope){ $scope.contacts=[”abcd@gmail.com", "abcd@yahoo.co.in"]; $scope.add=函数(){ $scope.contacts.push($scope.newcontact); $scope.newconta
功能控制器($scope){
$scope.contacts=[”abcd@gmail.com", "abcd@yahoo.co.in"];
$scope.add=函数(){
$scope.contacts.push($scope.newcontact);
$scope.newcontact=“”;
};
}
模块样本
电邮:
添加
联络
- {{contact}
对于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 = "";
};
}]);
angular.module('app')
.config(['$controllerProvider', function($controllerProvider) {
$controllerProvider.allowGlobals();
}]);
或
这是一个突破性的变化,但它是
例如:-
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 = "";
};
}]);
angular.module('app')
.config(['$controllerProvider', function($controllerProvider) {
$controllerProvider.allowGlobals();
}]);
以下是来自Angular source的评论:-
- 检查是否通过
$controllerProvider
- 检查对当前作用域上的字符串求值是否返回构造函数
- 如果$controllerProvider#allowGlobals,请检查全局
窗口
对象上的
(不推荐)窗口[constructor]
- 请确保在角度根元素(例如:-
)上也将appname放入html
指令中。示例:-ng app=“myApp”ng app
- 如果一切正常,但您仍然遇到问题,请记住确保脚本中包含正确的文件
- 您没有在不同的位置两次定义相同的模块,这会导致以前在相同模块上定义的任何实体被清除,例如
),以及在另一个位置angular.module('app',[]).controller(..
(当然包括这两个脚本)可导致模块angular.module('app',[]).service(..
上先前注册的控制器在第二次重新创建模块时被清除app
var app = app;
if(!app) {
app = angular.module('web', ['ui.bootstrap']);
}
app.controller('SearchCtrl', SearchCtrl);
我遇到这个问题是因为我在闭包中包装了一个控制器定义文件:
(function() {
...stuff...
});
但我忘记了调用闭包来执行定义代码,并告诉Javascript我的控制器存在。也就是说,上面需要:
(function() {
...stuff...
})();
请注意结尾处的()
function $ControllerProvider() {
var controllers = {},
globals = false;
到
只需照着教程进行操作,不推荐使用的全局函数就可以作为控制器使用。我是Angular的初学者,我犯了一个基本错误,没有将应用程序名称包含在Angular根元素中。因此,将代码从
<html data-ng-app>
到
为我工作。@PSL,已经在上面的回答中说明了这一点。我犯了这个错误,因为我不理解
angular.module('myApp',[])
和angular.module('myApp')
之间的区别
这将创建模块“myApp”,并覆盖任何名为“myApp”的现有模块:
angular.module('myApp',[])
此检索现有模块“myApp”:
angular.module('myApp')
我一直在另一个文件中覆盖我的模块,使用上面的第一个调用创建了另一个模块,而不是像我预期的那样进行检索
此处有更多详细信息:当您有一个包含许多模块的大型项目时,也可能会发生此错误。 确保角度文件中使用的应用程序(模块)与模板中使用的应用程序(模块)相同,在本例中为“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分钟四次检查所有东西,而它所需要的只是一个快速的启动。如果您使用的是路由(高概率),并且您的配置对模块中未声明为依赖项的控制器有引用,那么初始化也可能失败
例如,假设您已为应用程序配置ngRoute,如
angular.module('yourModule',['ngRoute'])
.config(function($routeProvider, $httpProvider) { ... });
在声明路线的块中要小心
.when('/resourcePath', {
templateUrl: 'resource.html',
controller: 'secondModuleController' //lives in secondModule
});
将secondModule
声明为“ngRoute”后的依赖项可以解决此问题。我知道我遇到了此问题。我在意外重新声明myApp时遇到了此问题:
var myApp = angular.module('myApp',[...]);
myApp.controller('Controller1', ...);
var myApp = angular.module('myApp',[...]);
myApp.controller('Controller2', ...);
重新声明后,Controller1
停止工作并引发操作错误。非常好的建议,但相同的错误可能只因缺少根页面上包含的关键脚本而发生
例如:
页面:index.html
np-app="saleApp"
缺失
<script src="./ordersController.js"></script>
因此,在这个甚至没有引用控制器的意外错误中可能会出现未定义控制器的问题,这是非常重要的。我之所以会出现此错误,是因为我使用的是与我的代码不兼容的angular的旧版本。在我的情况下,这些错误发生在列表中的语法错误之前。find()功能;IE11无法识别的列表的“find”方法,因此必须替换为Filter方法,该方法适用于IE11和chrome。
请参阅在我的例子中,这个错误前面是IE11中列表的find方法的语法错误。因此,建议将find方法替换为filter方法
然后在控制之上
var myApp = angular.module('myApp',[...]);
myApp.controller('Controller1', ...);
var myApp = angular.module('myApp',[...]);
myApp.controller('Controller2', ...);
np-app="saleApp"
<script src="./ordersController.js"></script>
.when('/orders/:customerId', {
controller: 'OrdersController',
templateUrl: 'views/orders.html'
})