AngularJS'de bir yönerge içine bir hizmet enjekte edebilir miyim?

234

Aşağıdaki gibi bir direktif içine bir hizmet enjekte etmeye çalışıyorum:

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

Ama bu bana bir hata veriyor Unknown provider: myDataProvider. Birisi lütfen koda bakıp yanlış bir şey yapıp yapmadığımı söyleyebilir mi?

angularjs

— İstisna
kaynak

Yanıtlar:

388

Direktifler üzerinde enjeksiyon yapabilirsiniz ve tıpkı her yerde olduğu gibi görünüyor.

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

— grendian
kaynak

Kodunuzu küçültdükten sonra bile çalıştığı için bu daha iyi bir çözüm olduğunu düşünüyorum.

— czerasz

Ben dönüş {} önce '_myData = myData' eklemek ve sonra bağlantı işlevi içinde _myData nesneyi başvurmak zorunda kaldı.

— Jelling

Teşekkürler @Jelling. Aynı şeyi yapmak zorundaydım. Acaba dışarıda biri bize nedenini söyleyebilir mi?

— sfletche

direktifine $ compile enjekte etmek için özel bir neden var mı? hiçbir yerde kullanılmıyor gibi görünüyor.

— gru

Direktif çağrısının dışında link işlevi oluşturmak istiyorsanız enjekte etmek için bir çözüm var mı?

— ThinkBonobo

Yönerge tanımınızı olarak olarak app.moduledeğiştirin app.directive. Bunun dışında her şey iyi görünüyor. Btw, çok nadiren direktiflere servis enjekte etmek zorundasınız. Direktifinize (bir görünümün bir parçası olan) bir hizmeti (genellikle veri kaynağı veya modeli olan) enjekte ediyorsanız, görünümünüzle modeliniz arasında doğrudan bir bağlantı oluşturursunuz. Bir denetleyici kullanarak birbirine bağlayarak bunları ayırmanız gerekir.

İyi çalışıyor. Ne yaptığınızdan emin değilim, hangisi yanlış. İşte bir yığın çalışma.

http://plnkr.co/edit/M8omDEjvPvBtrBHM84Am

— ganaraj
kaynak

Lütfen bir örnek verebilir misiniz

— istisna

@Exception Kodunuzu bir kemanın içine koyabilir misiniz? Bir göz atabilir ve kodunuzun neden çalışmadığını görebilir ve muhtemelen düzeltmenize yardımcı olabilirsiniz.

— ganaraj

@Exception kodun çalıştığını gösteren bir çalışma kümesi ekledi.

— ganaraj

Sadece bir şey keşfettim: Fonksiyon parametrelerinde bir enjeksiyon tanımlarsanız, function($location) { ...ancak aslında $locationfonksiyonun içine atıfta bulunmazsanız , AngularJS enjeksiyon yapmaz. Bu davranışı fark edebileceğiniz tek zaman hata ayıklayıcının içinde.

— Walter Stabosz

Ben "birleştiğinde" yorum katılıyorum emin değilim. Denetleyiciyi ve hizmeti küresel olarak zaten birleştiriyoruz - hizmetin çalışma zamanında programın yerini programsal olarak değiştiremeyiz. Bu, tek bir denetleyicinin tek bir hizmet aldığı anlamına gelir. Bununla birlikte, - yönergeler sayfadaki her etiket için ayrı yapılandırmaya sahiptir, bu nedenle potansiyel olarak farklı yönerge örneklerine farklı hizmet sunabiliriz. Bana öyle geliyor ki daha az ayrışmış.

— adam mograbi

İstediğiniz hizmeti almak için $ inject hizmetini de kullanabilirsiniz. Servis adını önceden bilmiyor, ancak servis arayüzünü biliyorsanız yararlı buluyorum. Örneğin, bir tabloyu bir ngResource bitiş noktasına bağlayacak bir yönerge veya herhangi bir api bitiş noktasıyla etkileşime giren genel bir silme-kayıt düğmesi. Her denetleyici veya veri kaynağı için tablo yönergesini yeniden uygulamak istemezsiniz.

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)

Artık 'anonim' hizmetiniz tamamen kullanılabilir durumda. Örneğin ngResource ise, verilerinizi almak için standart ngResource arabirimini kullanabilirsiniz

Örneğin:

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

Özellikle API uç noktalarıyla etkileşime giren öğeler yaparken bu tekniğin çok yararlı olduğunu gördüm.

— Tyrone Wilson
kaynak