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

Question

Staram się wprowadzić usługę do dyrektywy 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 wraca mi błąd Unknown provider: myDataProvider. Czy ktoś mógłby zajrzeć do kodu i powiedzieć mi, czy robię coś nie tak?

Answer 1

Można zrobić zastrzyk na dyrektywach, i wygląda tak jak to robi wszędzie indziej.

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

Answer 2

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

Działa dobrze. Nie jestem pewien, co robisz, co jest złe. Oto plusk tego działa.

http://plnkr.co/edit/M8omDEjvPvBtrBHM84Am

Answer 3

Możesz również skorzystać z usługi $ inject, aby uzyskać dowolną usługę. Uważam, że jest to przydatne, jeśli nie znam nazwy usługi z wyprzedzeniem, ale znam interfejs usługi. Na przykład dyrektywa, która będzie podłączać tabelę do punktu końcowego ngResource lub ogólnego przycisku kasowania rekordów, który współdziała z dowolnym punktem końcowym interfejsu API. Nie chcesz ponownie implementować dyrektywy table 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 twój 'anonimowy' usługa jest w pełni dostępny. Jeśli jest ngResource na przykład można 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 
) 

Znalazłem tę technikę, aby być bardzo przydatna przy wykonywaniu elementów, które współdziałają z punktami końcowymi API zwłaszcza .