SORU
7 EKİM 2013, PAZARTESİ


AngularJS Yönerge talimatlarına Ekle

Bakım götüren bir Direktif yapmaya çalışıyorumdaha direktifleri sözlerine ekledieleman için ilan edilir. Örneğin, datepicker, datepicker-language ng-required="true" ekleme ilgilenir bir Direktif kurmak istiyorum.

Eğer bu öznitelikleri ekleyin ve $compile kullanmak için çalışırsanız ben zaten gerekli olan özellikler ekledik diye kontrol ediyorum o kadar belli ki, sonsuz bir döngü oluşturur:

angular.module('app')
  .directive('superDirective', function ($compile, $injector) {
    return {
      restrict: 'A',
      replace: true,
      link: function compile(scope, element, attrs) {
        if (element.attr('datepicker')) { // check
          return;
        }
        element.attr('datepicker', 'someValue');
        element.attr('datepicker-language', 'en');
        // some more
        $compile(element)(scope);
      }
    };
  });

Eğer $compile elemanı değilim tabiki, eğer öznitelikleri ayarlamak olacak ama Direktif önyüklenen olmayacak.

Bu yaklaşım doğru mu veya yanlış mı yapıyorum? Daha iyi bir şekilde aynı davranışı elde etmek için var mı?

UDPATE: $compile bunu başarmak için tek yol olduğu gerçeği göz önüne alındığında, bir şekilde ilk derleme geçişi (öğe bir kaç çocuk içerebilir) atlamak var mı? Ayarlayarak belki 10**?

GÜNCELLEME 2: select bir unsuru haline Direktifi koyarak denedim ve, beklendiği gibi, derleme**12 beklenen s sayısı iki katı demektir ki, iki kere çalışır.

CEVAP
7 EKİM 2013, PAZARTESİ


Tek bir DOM öğesi birden fazla direktifleri olduğu durumlarda ve nerede uygulamalı konularda onlar sipariş, priority özelliği sırasına kullanabilirsiniz uygulama. Yüksek sayılar çalıştırın. Varsayılan öncelik eğer bir belirtin yok eğer doğru değilse 0.

EDİT: tartışmadan sonra, burada tam bir çalışma çözüm. Anahtarı olduözniteliği kaldırın: 14* *ve de 15* *kullanıcıların html data-common-things belirtin durumda)

angular.module('app')
  .directive('commonThings', function ($compile) {
    return {
      restrict: 'A',
      replace: false, 
      terminal: true, //this setting is important, see explanation below
      priority: 1000, //this setting is important, see explanation below
      compile: function compile(element, attrs) {
        element.attr('tooltip', '{{dt()}}');
        element.attr('tooltip-placement', 'bottom');
        element.removeAttr("common-things"); //remove the attribute to avoid indefinite loop
        element.removeAttr("data-common-things"); //also remove the same attribute with data- prefix in case users specify data-common-things in the html

        return {
          pre: function preLink(scope, iElement, iAttrs, controller) {  },
          post: function postLink(scope, iElement, iAttrs, controller) {  
            $compile(iElement)(scope);
          }
        };
      }
    };
  });

Mevcut plunker çalışma: http://plnkr.co/edit/Q13bUt?p=preview

Ya da:

angular.module('app')
  .directive('commonThings', function ($compile) {
    return {
      restrict: 'A',
      replace: false,
      terminal: true,
      priority: 1000,
      link: function link(scope,element, attrs) {
        element.attr('tooltip', '{{dt()}}');
        element.attr('tooltip-placement', 'bottom');
        element.removeAttr("common-things"); //remove the attribute to avoid indefinite loop
        element.removeAttr("data-common-things"); //also remove the same attribute with data- prefix in case users specify data-common-things in the html

        $compile(element)(scope);
      }
    };
  });

DEMO

Açıklama terminal: true ayarlamak için ve neden priority: 1000 (yüksek bir sayı):

DOM hazır olduğunda, açısal tüm kayıtlı direktifleri belirlemek ve yönergeler priority dayalı bir derleme DOM yürüreğer bu yönergeler aynı öğe üzerinde. Derlenmiş olacak emin olmak için yüksek bir sayı için özel yönergesi öncelik belirledikilkterminal: true ile diğer uygun olacaktıratlandıBu yönerge, sonra derlenmiş.

Özel amacımız derlenmiş direktifleri ekleme ve çıkarma kendisi ve kullanımı derlemek için servis$, öğe değiştirirtüm direktifleri (atlandı olanlar da dahil) derleme.

terminal:true priority: 1000, yok eğer doğru değilse bazı direktifler derlenen bir şans varönceözel yönergesi. Ve ne zaman = ^ öğe derlemek için derleme özel Direktifi kullanır dolar . daha önceden derlenmiş direktifleri derleme. Bu özellikle eğer direktifleri özel amacımız önce derlenmiş zaten DOM değiştirdi eğer öngörülemeyen davranışlara neden olur.

Öncelik ve terminal hakkında daha fazla bilgi için How to understand the `terminal` of directive? check out

Ayrıca şablon değiştiren Yönetmeliğin bir örneği ng-repeat, ng-repeat derlenmiş ng-repeat (öncelik = 1000)diğer yönergelerin önce şablon elemanı kopyalarını olun.

Teşekkürler @İzhaki yorum, burada ngRepeat kaynak kodu referansı: https://github.com/angular/angular.js/blob/master/src/ng/directive/ngRepeat.js

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Joseph Hayhoe

    Joseph Hayho

    20 Mayıs 2010
  • spectragirlz16's channel

    spectragirlz

    22 Ocak 2012
  • TheRightTire

    TheRightTire

    14 EKİM 2009