Bisakah saya menyuntikkan layanan ke arahan di AngularJS?

Saya mencoba menyuntikkan layanan ke arahan seperti di bawah ini:

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

Tapi ini mengembalikan saya kesalahan Unknown provider: myDataProvider. Bisakah seseorang melihat kode dan memberi tahu saya jika saya melakukan sesuatu yang salah?

Anda dapat melakukan injeksi pada Arahan, dan sepertinya itu dilakukan di tempat lain.

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

Ubah definisi arahan Anda dari app.modulemenjadi app.directive. Terlepas dari itu semuanya terlihat baik-baik saja. Btw, sangat jarang Anda harus menyuntikkan layanan ke arahan. Jika Anda menyuntikkan layanan (yang biasanya merupakan sumber data atau model) ke dalam arahan Anda (yang merupakan bagian dari tampilan), Anda membuat sambungan langsung antara tampilan dan model Anda. Anda harus memisahkannya dengan menghubungkannya menggunakan pengontrol.

Itu bekerja dengan baik. Saya tidak yakin apa yang Anda lakukan itu salah. Ini adalah sebagian kerjanya.

http://plnkr.co/edit/M8omDEjvPvBtrBHM84Am

Anda juga dapat menggunakan layanan $ inject untuk mendapatkan layanan apa pun yang Anda suka. Saya menemukan itu berguna jika saya tidak tahu nama layanan sebelumnya tetapi tahu antarmuka layanan. Misalnya arahan yang akan menyambungkan tabel ke titik akhir ngResource atau tombol hapus-rekam umum yang berinteraksi dengan titik akhir api apa pun. Anda tidak ingin menerapkan kembali arahan tabel untuk setiap pengontrol atau sumber data.

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)

sekarang layanan 'anonim' Anda sepenuhnya tersedia. Jika itu adalah ngResource misalnya, Anda dapat menggunakan antarmuka ngResource standar untuk mendapatkan data Anda

Sebagai contoh:

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

Saya telah menemukan teknik ini sangat berguna ketika membuat elemen yang berinteraksi dengan titik akhir API khususnya.