Чи можу я ввести послугу в директиву в AngularJS?

Я намагаюся ввести послугу в директиву, як нижче:

 var app = angular.module('app',[]);
 app.factory('myData', function(){
     return {
        name : "myName"
     }
 });
 app.directive('changeIt',function($compile, myData){
    return {
            restrict: 'C',
            link: function (scope, element, attrs) {
                scope.name = myData.name;
            }
        }
 });

Але це повертає мені помилку Unknown provider: myDataProvider. Може хтось, будь ласка, загляне в код і скаже, чи я роблю щось не так?

Ви можете робити ін'єкції за директивами, і це виглядає так, як це робиться скрізь.

app.directive('changeIt', ['myData', function(myData){
    return {
        restrict: 'C',
        link: function (scope, element, attrs) {
            scope.name = myData.name;
        }
    }
 }]);

Змініть визначення директиви з app.moduleна app.directive. Крім того, все виглядає добре. До речі, дуже рідко вам доводиться вводити послугу в директиву. Якщо ви вводите послугу (яка зазвичай є джерелом даних або моделлю) у вашу директиву (яка є частиною перегляду), ви створюєте прямий зв'язок між вашим представленням та моделлю. Їх потрібно відокремити, з'єднавши їх за допомогою контролера.

Це добре працює. Я не впевнений, що ти робиш, що не так. Ось ця робота працює.

http://plnkr.co/edit/M8omDEjvPvBtrBHM84Am

Ви також можете скористатися послугою $ inject, щоб отримати будь-яку послугу, яка вам подобається. Я вважаю це корисним, якщо я не знаю назви служби достроково, але знаю інтерфейс сервісу. Наприклад, директива, яка підключить таблицю до кінцевої точки ngResource або загальної кнопки видалення-запису, яка взаємодіє з будь-якою кінцевою точкою api. Ви не хочете повторно реалізувати директиву таблиць для кожного контролера чи джерела даних.

template.html

<div my-directive api-service='ServiceName'></div>

my-directive.directive.coffee

angular.module 'my.module'
  .factory 'myDirective', ($injector) ->
    directive = 
      restrict: 'A'
      link: (scope, element, attributes) ->
        scope.apiService = $injector.get(attributes.apiService)

тепер ваша "анонімна" послуга повністю доступна. Якщо це, наприклад, ngResource, ви можете використовувати стандартний інтерфейс ngResource для отримання своїх даних

Наприклад:

scope.apiService.query((response) ->
  scope.data = response
, (errorResponse) ->
  console.log "ERROR fetching data for service: #{attributes.apiService}"
  console.log errorResponse.data
)

Я вважав, що ця методика дуже корисна при створенні елементів, особливо взаємодіючих з кінцевими точками API.