Açısal Yönergenin Genişletilmesi

Bir 3. taraf yönergesinde (özellikle Angular UI Bootstrap ) küçük bir değişiklik yapmak istiyorum . Sadece kapsamına eklemek istiyorumpaneDirektifin :

angular.module('ui.bootstrap.tabs', [])
.controller('TabsController', ['$scope', '$element', function($scope, $element) {
  // various methods
}])
.directive('tabs', function() {
  return {
    // etc...
  };
})
.directive('pane', ['$parse', function($parse) {
  return {
    require: '^tabs',
    restrict: 'EA',
    transclude: true,
    scope:{
      heading:'@',
      disabled:'@' // <- ADDED SCOPE PROPERTY HERE
    },
    link: function(scope, element, attrs, tabsCtrl) {
      // link function
    },
    templateUrl: 'template/tabs/pane.html',
    replace: true
  };
}]);

Ama aynı zamanda Angular-Bootstrap'i Bower ile güncel tutmak istiyorum. Koşar koşmazbower update , değişikliklerimin üzerine yazacağım.

Öyleyse, bu yönergeyi bu çardak bileşeninden ayrı olarak nasıl genişletebilirim?

Muhtemelen bunu çözmenin en basit yolu, uygulamanızda üçüncü taraf yönergesi ile aynı ada sahip bir yönerge oluşturmaktır. Her iki yönerge de çalışır ve priorityözelliği kullanarak çalıştırma sıralarını belirleyebilirsiniz (daha yüksek öncelik ilk önce çalışır).

İki yönerge kapsamı paylaşır ve yönergenizin linkyöntemi aracılığıyla üçüncü taraf yönergesinin kapsamına erişebilir ve bunları değiştirebilirsiniz .

Seçenek 2: Ayrıca, bir üçüncü taraf yönergesinin kapsamına, kendisiyle aynı öğeye rastgele adlandırılmış kendi yönergenizi koyarak da erişebilirsiniz (her iki yönergede de yalıtım kapsamı kullanılmadığı varsayılır). Bir öğedeki tüm yalıtılmamış kapsam yönergeleri kapsamı paylaşır.

Daha Fazla Okuma: https://github.com/angular/angular.js/wiki/Dev-Guide%3A-Understanding-Directives

Not: Önceki cevabım, bir yönergeyi değil, bir üçüncü taraf hizmetini değiştirmek içindi.

TL; DR - demo ver!

     Big Demo Button     
 

Üçüncü tarafın direktifini süslemek için $provide's' i kullanın decorator().

Bizim durumumuzda, direktifin kapsamını şu şekilde genişletebiliriz:

app.config(function($provide) {
    $provide.decorator('paneDirective', function($delegate) {
        var directive = $delegate[0];
        angular.extend(directive.scope, {
            disabled:'@'
        });
        return $delegate;
    });
});

İlk olarak, paneyönergeyi Directiveilk argüman olarak birleştirilerek adını ileterek dekore etmeyi isteriz, sonra onu geri çağrı parametresinden alırız (bu adla eşleşen bir dizi yönergedir).

Elimize geçtikten sonra, kapsam nesnesini alabilir ve gerektiğinde genişletebiliriz. Tüm bunların configblokta yapılması gerektiğine dikkat edin .

Bazı notlar

• Aynı ada sahip bir direktifin eklenmesi ve ardından öncelik düzeyinin ayarlanması önerilmiştir. Anlamsız olmasının yanı sıra (ki bu bir kelime bile değil , biliyorum…) sorunlar ortaya çıkarır , örneğin üçüncü taraf direktifinin öncelik seviyesi değişirse?

• JeetendraChauhan, bu çözümün 1.13 sürümünde çalışmayacağını iddia etti (yine de test etmedim).

Bu, sorunuzun doğrudan cevabı olmasa da, http://angular-ui.github.io/bootstrap/ en son sürümünün (ana sürüm) sekmeleri devre dışı bırakmak için destek eklediğini bilmek isteyebilirsiniz . Bu özellik şu şekilde eklenmiştir: https://github.com/angular-ui/bootstrap/commit/2b78dd16abd7e09846fa484331b5c35ece6619a2

Orijinal yönergeyi değiştirmeden genişleten yeni bir yönergeyi oluşturduğunuz başka bir çözüm

Çözüm, dekoratör çözümüne benzer:

Yeni bir yönerge oluşturun ve genişletmek istediğiniz yönergeyi bağımlılık olarak enjekte edin

app.directive('extendedPane', function (paneDirective) {

  // to inject a directive as a service append "Directive" to the directive name
  // you will receive an array of directive configurations that match this 
  // directive (usually only one) ordered by priority

  var configExtension = {
     scope: {
       disabled: '@'
     }
  }

  return angular.merge({}, paneDirective[0], configExtension)
});

Bu şekilde orijinal yönergeyi ve genişletilmiş sürümü aynı uygulamada kullanabilirsiniz

Burada,bindToController özelliğe sahip bir yönergeye bağlamaları genişletmenin farklı bir senaryosu için başka bir çözüm var .

Not: Bu, burada sunulan diğer çözümlere bir alternatif değildir. Yalnızca orijinal direktifin kurulduğu belirli bir durumu (diğer yanıtlarda ele alınmayan) çözer bindToController.