javascript AngularJS 在控制器中注入一个模块
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14834226/
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
AngularJS inject a module in a controller
提问by user253530
I am trying to write a reusable component that will handle errors in a consistent way across all my pages. Problem is that I can't inject it in my controller although the component works. Here's some of the code:
我正在尝试编写一个可重用的组件，它将在我的所有页面中以一致的方式处理错误。问题是我无法将它注入我的控制器，尽管该组件可以工作。这是一些代码：
app.js
应用程序.js
'use strict';
// Declare app level module which depends on filters, and services
angular.module('Popdown', ['Popdown.directives']);
angular.module('Page', ['Popdown']);
directives.js
指令.js
'use strict';
/* Directives */
angular.module('Popdown.directives', []).
directive('popdown', function() {
return {
scope: {},
templateUrl: 'partials/popdown.html',
replace: true,
compile: function(cElement, attrs) {
cElement.css('position','absolute');
var h = cElement.height();
cElement.css('background-color','black');
cElement.css('height', '50px');
cElement.css('margin', '0 auto');
cElement.css('top', parseInt(-h) + 'px');
},
link: function(scope, lElement, attrs) {
scope.$watch('message', function() {
lElement.animate({
'top': '0px'
}, {
duration: 400,
easing: 'swing'
})
});
}
}
});
controllers.js
控制器.js
'use strict';
/* Controllers */
var PopdownCtl = function($scope) {
$scope.notify = function(message) {
$scope.icon = 'icon-notify';
$scope.message = message;
}
}
var IndexCtl = function($scope, Popdown) {
$scope.error = 'No error yet';
var msg = Math.random();
Popdown.notify(msg);
$scope.throwError = function() {
}
}
IndexCtl.$inject = ['Popdown'];
index.html
索引.html
<!doctype html>
<html lang="en" ng-app>
<head>
<meta charset="utf-8">
<title>My AngularJS App</title>
<link rel="stylesheet" href="css/app.css"/>
</head>
<body>
<ul class="menu">
<li><a href="#/view1">view1</a></li>
<li><a href="#/view2">view2</a></li>
</ul>
<div ng-view></div>
<div ng-controller="IndexCtl"></div>
<div popdown></div>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
-->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="lib/angular/angular.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
</body>
</html>
I keep getting the following error:
我不断收到以下错误：
Error: Unknown provider: PopdownProvider <- Popdown
at Error (<anonymous>)
at http://localhost:8000/app/lib/angular/angular.js:2652:15
at Object.getService [as get] (http://localhost:8000/app/lib/angular/angular.js:2780:39)
at http://localhost:8000/app/lib/angular/angular.js:2657:45
at getService (http://localhost:8000/app/lib/angular/angular.js:2780:39)
at invoke (http://localhost:8000/app/lib/angular/angular.js:2798:13)
at Object.instantiate (http://localhost:8000/app/lib/angular/angular.js:2830:23)
at http://localhost:8000/app/lib/angular/angular.js:4657:24
at http://localhost:8000/app/lib/angular/angular.js:4236:17
at forEach (http://localhost:8000/app/lib/angular/angular.js:117:20)
I am new with AngularJS and I find it pretty cool but seems I'm still a noob...could anybody help me understand what's happening here?
我是 AngularJS 的新手，我觉得它很酷，但似乎我还是个菜鸟……有人能帮我理解这里发生了什么吗？
回答by pkozlowski.opensource
You are missing module specification in the ng-appdirective. It should specify a module name as its attribute value.
您在ng-app指令中缺少模块规范。它应该指定一个模块名称作为其属性值。
Since you are planning to have several reusable modules you would probably like to declare a top-level, application module with dependencies on other modules, something like:
由于您计划拥有多个可重用模块，因此您可能希望声明一个依赖于其他模块的顶级应用程序模块，例如：
angular.module('app', ['Popdown', 'Page']);
and then in your HTML:
然后在你的 HTML 中：
<html lang="en" ng-app="app">
I would advice going through this documentation: http://docs.angularjs.org/guide/moduleand this SO question: https://stackoverflow.com/a/12339707/1418796
我建议阅读此文档：http: //docs.angularjs.org/guide/module和这个 SO 问题：https: //stackoverflow.com/a/12339707/1418796
![javascript jQuery.expr[':'] 是如何工作的，它在 jQuery1.8.x 和更高版本中的文档在哪里？](/res/img/loading.gif)