Puis-je injecter un service dans une directive dans AngularJS?

J'essaie d'injecter un service dans une directive comme ci-dessous:

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

Mais cela me renvoie une erreur Unknown provider: myDataProvider. Est-ce que quelqu'un pourrait regarder le code et me dire si je fais quelque chose de mal?

Vous pouvez faire de l'injection sur des directives, et cela ressemble à ce qu'il fait partout ailleurs.

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

Modifiez votre définition de directive de app.moduleà app.directive. A part ça, tout va bien. Au fait, vous devez très rarement injecter un service dans une directive. Si vous injectez un service (qui est généralement une source de données ou un modèle) dans votre directive (qui fait en quelque sorte partie d'une vue), vous créez un couplage direct entre votre vue et votre modèle. Vous devez les séparer en les câblant ensemble à l'aide d'un contrôleur.

Cela fonctionne bien. Je ne sais pas ce que vous faites qui est mal. Voici un morceau de cela fonctionne.

http://plnkr.co/edit/M8omDEjvPvBtrBHM84Am

Vous pouvez également utiliser le service $ inject pour obtenir le service que vous souhaitez. Je trouve cela utile si je ne connais pas le nom du service à l'avance mais que je connais l'interface du service. Par exemple, une directive qui connectera une table à un point de terminaison ngResource ou à un bouton générique de suppression d'enregistrement qui interagit avec n'importe quel point de terminaison api. Vous ne voulez pas réimplémenter la directive table pour chaque contrôleur ou source de données.

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)

maintenant, votre service «anonyme» est entièrement disponible. Si c'est ngResource par exemple, vous pouvez alors utiliser l'interface standard ngResource pour obtenir vos données

Par exemple:

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

J'ai trouvé cette technique très utile lors de la création d'éléments qui interagissent avec les points de terminaison API en particulier.