Puis-je injecter un service dans une directive?

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($comstack, myData){ return { ressortingct: 'C', link: function (scope, element, attrs) { scope.name = myData.name; } } }); 

Mais cela me renvoie une erreur Unknown provider: myDataProvider . Quelqu’un pourrait-il s’il vous plaît regarder dans le code et me dire si je fais quelque chose de mal?

Vous pouvez faire l’injection sur des directives, et cela ressemble à ce qu’il est partout ailleurs.

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

Changez votre définition de directive de app.module à app.directive . A part ça, tout a l’air bien. Btw, très rarement, vous devez 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 (ce qui fait partie d’une vue), vous créez un couplage direct entre votre vue et votre modèle. Vous devez les séparer en les connectant ensemble à l’aide d’un contrôleur.

Ça marche bien. Je ne suis pas sûr de ce que vous faites qui est faux. Voici un morceau de travail qui fonctionne.

http://plnkr.co/edit/M8omDEjvPvBtrBHM84Am

Vous pouvez également utiliser le service $ inject pour obtenir le service de votre choix. 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 va twigr une table dans un sharepoint terminaison ngResource ou un bouton de suppression-enregistrement générique qui interagit avec tout sharepoint terminaison api. Vous ne voulez pas réimplémenter la directive de table pour chaque contrôleur ou source de données.

template.html

 

my-directive.directive.coffee

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

maintenant votre service «anonyme» est entièrement disponible. Si c’est le cas, par exemple, vous pouvez 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: #{atsortingbutes.apiService}" console.log errorResponse.data ) 

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