Kann ich einen Dienst in eine Direktive in AngularJS einfügen?

Ich versuche, einen Dienst in eine Richtlinie wie die folgende einzufügen:

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

Aber das gibt mir einen Fehler zurück Unknown provider: myDataProvider. Könnte jemand bitte in den Code schauen und mir sagen, wenn ich etwas falsch mache?

Sie können Direktiven injizieren, und es sieht genauso aus wie überall sonst.

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

Ändern Sie Ihre Direktivendefinition von app.modulenach app.directive. Ansonsten sieht alles gut aus. Übrigens müssen Sie sehr selten einen Dienst in eine Richtlinie einfügen. Wenn Sie einen Dienst (der normalerweise eine Datenquelle oder ein Modell ist) in Ihre Direktive (die Teil einer Ansicht ist) einfügen, erstellen Sie eine direkte Kopplung zwischen Ihrer Ansicht und Ihrem Modell. Sie müssen sie trennen, indem Sie sie mit einem Controller miteinander verbinden.

Es funktioniert gut. Ich bin nicht sicher, was Sie tun, was falsch ist. Hier funktioniert ein Teil davon.

http://plnkr.co/edit/M8omDEjvPvBtrBHM84Am

Sie können auch den $ inj-Service verwenden, um den gewünschten Service zu erhalten. Ich finde das nützlich, wenn ich den Dienstnamen nicht im Voraus kenne, aber die Dienstschnittstelle kenne. Zum Beispiel eine Direktive, die eine Tabelle in einen ngResource-Endpunkt einfügt, oder eine generische Schaltfläche zum Löschen von Datensätzen, die mit einem beliebigen API-Endpunkt interagiert. Sie möchten die Tabellenanweisung nicht für jeden Controller oder jede Datenquelle erneut implementieren.

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)

Jetzt ist Ihr "anonymer" Dienst vollständig verfügbar. Wenn es sich beispielsweise um ngResource handelt, können Sie die Standardschnittstelle ngResource verwenden, um Ihre Daten abzurufen

Beispielsweise:

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

Ich habe festgestellt, dass diese Technik sehr nützlich ist, wenn Elemente erstellt werden, die insbesondere mit API-Endpunkten interagieren.