2

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

应用程序.js

'use strict';


// Declare app level module which depends on filters, and services
angular.module('Popdown', ['Popdown.directives']);

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

指令.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'
                })
            });
        }
    }
  });

控制器.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'];

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

4

1 回答 1

3

您在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

于 2013-02-12T14:10:06.787 回答