AngularJS вставляет модуль в контроллер

Я пытаюсь написать многократно используемый компонент, который будет обрабатывать ошибки согласованным образом на всех моих страницах. Проблема в том, что я не могу вводить ее в контроллер, хотя компонент работает. Вот некоторые из кода:AngularJS вставляет модуль в контроллер

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 и я нахожу это очень здорово, но, кажется, я еще нуб ... может кто-нибудь помочь мне понять, что здесь происходит?

источник

2013-02-12 user253530

Если ваша цель просто чтобы обеспечить набор функций обработки ошибок для разных контроллеров, вам лучше обслуживать их, разместив их в службе. – KayakDave

Отсутствует спецификация модуля в директиве 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

источник

2013-02-12 14:10:06

Я пробовал, и это, похоже, не решило проблему. Если возможно, вы могли бы объяснить более подробно? – user253530

@ user253530 вид тяжело помочь больше, не видя ваш код. Может быть, вы можете отправить плункер (http://plnkr.co/) с живым примером вашего кода? –

AngularJS вставляет модуль в контроллер

ответ

Смежные вопросы