javascript 参数“ContactsCtrl”不是函数，未定义
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18378618/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Argument 'ContactsCtrl' is not a function, got undefined
提问by Omar
I'm having a problem in AngularJS routing and controllers. Here is the code:
我在 AngularJS 路由和控制器方面遇到了问题。这是代码：
Index.html
索引.html
<!DOCTYPE html>
<html ng-app="contacts">
<head>
<script src="libs/angular.min%20(1).js"></script>
<script src="contacts.js"></script>
<script src="index.js"></script>
<title></title>
</head>
<body >
<div data-ng-view=""></div>
</body>
</html>
index.js
索引.js
var myApp = angular.module('contacts', []);
myApp.config(function ($routeProvider) {
$routeProvider
.when('/', { controller: 'ContactsCtrl', templateUrl: '/views/show-contacts.html' })
//.when('/view2', { controller: 'MyCont', templateUrl: 'V2.htm' })
.otherwise({ redirectTo: '/' });
});
contacts.js
联系人.js
var myApp = angular.module('contacts', []);
myApp.controller('ContactsCtrl', function ($scope) {
$scope.name = "omar";
});
but I'm getting this error:
但我收到此错误：
Argument 'ContactsCtrl' is not a function, got undefined
参数“ContactsCtrl”不是函数，未定义
Any help?
有什么帮助吗？
回答by BKM
Change your index.html like this;
像这样改变你的 index.html;
<script src="index.js"></script>
<script src="contacts.js"></script>
And in your contact.js change
并在您的 contact.js 更改
var myApp = angular.module('contacts', []);to
var myApp = angular.module('contacts', []);到
var myApp = angular.module('contacts');
Angular module with two arguments like angular.module('contacts', []);will create a new module, but angular module with single argument like angular.module('contacts');will pick up the existing module. Here in this case 'contacts'
带有两个参数 like 的 Angular 模块angular.module('contacts', []);将创建一个新模块，但带有单个参数 like 的Angular 模块angular.module('contacts');将选取现有模块。在这种情况下'contacts'
回答by Pavlo
You are redefining your app in index.js, so the controller created in contacts.jsis lost. Remove this line from index.js:
您正在 中重新定义您的应用程序index.js，因此在 中创建的控制器contacts.js丢失了。从 中删除此行index.js：
var myApp = angular.module('contacts', []);
回答by sunshine
I would suggest to create two different module names one in the index.js ( This would be the app name that you would refer in the html ng-app attribute) and other in contacts.js (The module name for the controllers). In the index.js create a dependecy to the contacts.js`. I was able to fix the problem by doing the below.
我建议在 index.js 中创建两个不同的模块名称（这将是您将在 html ng-app 属性中引用的应用程序名称），另一个在contacts.js（控制器的模块名称）中。在 index.js 中创建一个对contacts.js`的依赖。我能够通过执行以下操作来解决问题。
Updated contacts.jsHere i updated the contacts to contactsController
更新了contacts.js这里我更新了contactsController
var myApp = angular.module('contactsController', []);
myApp.controller('ContactsCtrl', function ($scope) {
$scope.name = "omar";
});
Updated index.jsHere i added the contactsController as the dependency. I found it easier to name this as app.js. This way ng-app is always mapped to the module name in app.js.
更新 index.js在这里我添加了 contactsController 作为依赖项。我发现将其命名为 app.js 更容易。这样 ng-app 总是映射到 app.js 中的模块名称。
var myApp = angular.module('contacts', [contactsController]);
myApp.config(function ($routeProvider) {
$routeProvider
.when('/', { controller: 'ContactsCtrl', templateUrl: '/views/show-contacts.html' })
//.when('/view2', { controller: 'MyCont', templateUrl: 'V2.htm' })
.otherwise({ redirectTo: '/' });
});
