Czy mogę wprowadzić usługę do dyrektywy w AngularJS?

Próbuję wprowadzić usługę do dyrektywy, takiej jak poniżej:

 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;
            }
        }
 });

Ale to zwraca mi błąd Unknown provider: myDataProvider. Czy ktoś mógłby zajrzeć do kodu i powiedzieć, czy robię coś źle?

Możesz zrobić zastrzyk do dyrektyw i wygląda to tak samo jak wszędzie indziej.

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

Zmień definicję dyrektywy z app.modulena app.directive. Poza tym wszystko wygląda dobrze. Przy okazji bardzo rzadko trzeba wstrzykiwać usługę do dyrektywy. Jeśli wstrzykujesz usługę (która zwykle jest źródłem danych lub modelem) do swojej dyrektywy (która jest rodzajem widoku), tworzysz bezpośrednie połączenie między twoim widokiem a modelem. Musisz je oddzielić, łącząc je za pomocą kontrolera.

Działa dobrze. Nie jestem pewien, co robisz, co jest złe. Oto część z tego działa.

http://plnkr.co/edit/M8omDEjvPvBtrBHM84Am

Możesz także skorzystać z usługi $ inject, aby uzyskać dowolną usługę. Uważam to za przydatne, jeśli nie znam nazwy usługi z wyprzedzeniem, ale znam interfejs usługi. Na przykład dyrektywa, która połączy tabelę z punktem końcowym ngResource lub ogólny przycisk usuwania-zapisu, który współdziała z dowolnym punktem końcowym interfejsu API. Nie chcesz ponownie wdrażać dyrektywy tabelowej dla każdego kontrolera lub źródła danych.

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)

teraz Twoja „anonimowa” usługa jest w pełni dostępna. Jeśli na przykład jest to ngResource, możesz użyć standardowego interfejsu ngResource, aby uzyskać dane

Na przykład:

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

Uważam, że ta technika jest bardzo przydatna podczas tworzenia elementów, które szczególnie współdziałają z punktami końcowymi interfejsu API.