我正在尝试编写一个可重用的组件,它将在我的所有页面中以一致的方式处理错误。问题是虽然组件有效,但我无法将其注入控制器。 以下是一些代码:
app.js
'use strict';
// Declare app level module which depends on filters, and services
angular.module('Popdown', ['Popdown.directives']);
angular.module('Page', ['Popdown']);
directives.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
'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
<!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>
我一直收到以下错误:
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)
我是AngularJS的新手,我发现它非常酷但似乎我仍然是一个菜鸟......有人能帮我理解这里发生的事情吗?
答案 0 :(得分:3)
您在ng-app
指令中缺少模块规范。它应该指定模块名称作为其属性值。
由于您计划拥有多个可重用模块,因此您可能希望声明一个顶级应用程序模块,该模块具有对其他模块的依赖性,例如:
angular.module('app', ['Popdown', 'Page']);
然后在你的HTML中:
<html lang="en" ng-app="app">
我会建议浏览此文档:http://docs.angularjs.org/guide/module以及此问题:https://stackoverflow.com/a/12339707/1418796