ディレクティブにサービスを挿入できますか？

Question

私は以下のようなディレクティブにサービスを注入しようとしています：

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

しかし、これは私にエラーUnknown provider: myDataProviderを返しています。誰かがコードを見て、私が何か間違っているかどうか教えてください。

Answer 1

あなたはディレクティブに注入を行うことができ、そしてそれは他のどこでもないだけのように見えます。

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

Answer 2

ディレクティブの定義をapp.moduleからapp.directiveに変更してください。それ以外は、すべてがうまく見えます。 Btwは、ごくまれに、サービスを指令に注入する必要があります。ディレクティブ（ある種のビューの一部）にサービス（通常はデータソースまたはモデル）を注入する場合は、ビューとモデルを直接結合することになります。コントローラーを使用してそれらを一緒に配線することによってそれらを分離する必要があります。

正常に動作します。あなたがしていることが間違っているかどうかは分かりません。ここには働いているのは大したことです。

http://plnkr.co/edit/M8omDEjvPvBtrBHM84Am

Answer 3

$ injectサービスを使用して、好きなサービスを取得することもできます。私は前もってサービス名を知らないがサービスインタフェースを知っていれば便利だと思う。たとえば、テーブルをngResourceエンドポイントに接続するディレクティブや、任意のapiエンドポイントと対話する一般的なdelete-recordボタンです。すべてのコントローラまたはデータソースに対してテーブルディレクティブを再実装する必要はありません。

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) 

今あなたの '匿名' のサービスが完全に利用可能です。それは例えばngResourceある場合は、その後、たとえばデータ

を取得するには、標準のngResourceインターフェースを使用することができます。

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

特にAPIエンドポイントとの相互作用の要素を作成するときに、この技術は非常に有用であることが私を発見しました。