AngularJS 在控制器中注入模块答案

【问题标题】：AngularJS inject a module in a controllerAngularJS 在控制器中注入模块
【发布时间】：2013-02-12 13:56:51
【问题描述】：

我正在尝试编写一个可重用的组件，该组件将在我的所有页面中以一致的方式处理错误。问题是尽管组件可以工作，但我无法将其注入我的控制器中。以下是部分代码：

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 的新手，我觉得它很酷，但似乎我还是个菜鸟……谁能帮我理解这里发生了什么？

【问题讨论】：

如果您的目标只是提供一组跨不同控制器的错误处理功能，那么将它们放在服务中会更好地为您服务。

标签： javascript angularjs angularjs-directive

【解决方案1】：

ng-app 指令中缺少模块规范。它应该指定一个模块名称作为其属性值。

由于您计划拥有多个可重用模块，您可能希望声明一个依赖于其他模块的顶级应用程序模块，例如：

angular.module('app', ['Popdown', 'Page']);

然后在您的 HTML 中：

<html lang="en" ng-app="app">

我建议仔细阅读此文档：http://docs.angularjs.org/guide/module 和这个 SO 问题：https://stackoverflow.com/a/12339707/1418796

【讨论】：

我试过了，但似乎并没有解决问题。如果可能，您能详细解释一下吗？
@user253530 很难在没有看到您的代码的情况下提供更多帮助。也许您可以发送一个 plunker (plnkr.co) 与您的代码的实时示例？