AngularJS yönergeleri hangi sırayla derlenmiş

Question

Fark ettiğim kadarıyla, ilk gelenin ilk adımı olan şeyleri derler. Etraftaki bazı öğeleri saran bir direktif yaptım ve içeriğindeki şeyleri arayan bir link özelliğine sahip olmak istiyorum. Somut bir kullanım örneği için

: Ben ilk girişi için içerik içinde arar ve ekler bir giriş etiketi direktifi yapıyorum rastgele input için id ve burada label

bir for niteliği üretilen kod :

// Find the first element with the attribute ng-label-target or the first input and links a label to it 
app.directive('ngLabel', function() { 
    return { 
    restrict: 'E', 
    replace: true, 
    transclude: true, 
    scope: { 
     label: '@', 
    }, 
    template: '<span class="ng-label">' + 
       '<label class="ng-label-text">{{label}}</label>' + 
       '<span class="ng-label-content" ng-transclude></span>' + 
       '</span>', 
    link: function (scope, element, attrs) { 
     scope.id = scope.id || 'random-id-' + Math.floor(Math.random() * 90000000); 
     angular.element(element[0].querySelector('.ng-label-text')). 
     attr({for:scope.id}); 

     var target = angular.element(element[0].querySelector('[ng-label-target]')); 
     if (!target || target.length == 0) { 
     target = angular.element(element[0].querySelectorAll('input,select,textarea')[0]); 
     } 
     target.attr({id:scope.id}); 
    }, 
    }; 
}); 

Örnek Kullanım:

<ng-label label="Text:"> 
    <input type="text" ng-model="page.textColor" size="5" maxlength="7" placeholder="e.g. #000" required /> 
    <input ng-label-target type="color" ng-model="page.textColor" required /> 
</ng-label> 

Bu kendi başına bir çekicilik gibi çalışır.

Ancak şimdi birkaç girişi otomatik olarak oluşturmak ve etiket işaretini ilkine sahip olmak istiyorum. Sorun şu ki, ng-label içinde bir ng-repeat yaptığımda, yönerge işlendikten sonra ng-repeat kodu oluşturulur, böylece aslında hiçbir şey bulunmaz.

Bu nedenle sorum şu: diğer yönlerin yerine iç içe doğru yönergeleri değerlendirmek için açısal olarak belirtebileceğiniz bir yol var mı?

Veya bunu yapmakta olduğumdan daha yapıcı bir yol var mı?

Ürünlerin değerlendirildiği sırayı örneklemek için bir keman yaptım. Ben büyük ölçüde basitleştirmek düşünüyorum

http://jsfiddle.net/YLM9P/

Answer 1

:

ÖNCELİK tek DOM öğesindeki tanımlanan birden direktifler olduğunda, bazen direktifleri uygulanma sırasını belirlemek için gereklidir. Önceliği, yönergeleri çağrılmadan önce yönergeleri sıralamak için kullanılır. Öncelik bir sayı olarak tanımlanır. Daha büyük sayısal öncelikli direktifler ilk önce derlenir. Ön bağlantı fonksiyonları da öncelik sırasına göre çalışır, ancak bağlantı sonrası işlevler ters sırada çalışır. Aynı önceliğe sahip direktiflerin sırası tanımlanmamıştır. Varsayılan önceliktir sonra şu anki önceliğimiz cari öncelikte herhangi direktifler hala aynı önceliğe yürütme sipariş olarak çalıştırır (çalıştırır yönergelerin son ayarlanan olacak True olarak ayarlanırsa 0.

TERMİNAL undefined).

Sorunuz için, terminal özelliğini true olarak ayarlamanızın sorununuzu çözeceğine inanıyorum.

app.directive('ngLabel', function() { 
    return { 
    restrict: 'E', 
    replace: true, 
    transclude: true, 
    .... 
    .... 
    terminal: true 
}); 

Answer 2

: Bunu içeriği (Ben tekrarlarının demet yapmak zorunda böylece mikrosaniye daha düşük gidemez) var daha dış yönergesi daha küçük veya ona eşit değere sahip olduğunu görüyoruz kodunuzda ve ana öğede bir işlev ifadesi ekleyerek (muhtemelen bir parametreden geçirerek), ardından bu işlevi ng-yinelemedeki alt öğe (ler) den çağırarak sorgunuzuSelectorAll (çok açısal değil) ortadan kaldırın. İşlev, sadece kullanacağınız bir değeri ayarlayacaktır ve bir kez ayarlandıktan sonra, ilkine sahip olduğunuzu ve geri kalanının göz ardı edilmesi gerektiğini bilirsiniz. Ng-yineleme giriş alanlarınızdaki nihai HTML'nin neye benzemesi gerektiğini gösterdiğinizde biraz daha spesifik olabilirdim. açısal Dokümanlar

Answer 3

DOM'a eklenen öğeleri dinleyen bir MutationObserver kaydettirmeyi deneyebilirsiniz. Ama bu soruna biraz havai olabilir - sen karar;)

var observer = new MutationObserver(function(mutations) { 
    mutations.forEach(function(mutation) { 
    // you get notified about added DOM elements here 
    // check mutation.type if it was an insertion 
    // then you handle the first node specifically. 
    console.log(mutation.target.nodeName, mutation.type, mutation); 
    }); 
}); 

var config = {childList: true, attributes: false, characterData: false, subtree: false, attributeOldValue: false, characterDataOldValue: false}; 
observer.observe(element[0], config); 

 
Demo    http://plnkr.co/h6kTtq 
Documentation  https://developer.mozilla.org/en/docs/Web/API/MutationObserver 
Browser support http://caniuse.com/mutationobserver 

Answer 4

Bu sorun, Açısal birçok diğerleri gibi ek bir yönerge oluşturarak çözülebilir:

app.directive('myLabelTarget', function() { 
return { 
    require: '^myLabel', 
    link: function(scope, element, attrs, myLabelCtrl) { 
    myLabelCtrl.doIfFirst(function(id) { 
     attrs.$set('id', id); 
    }); 
    } 
}; 
}); 

require özniteliğiyle, myLabel yönergesinin denetleyicisine DOM'de daha yüksek bir değere erişebilirsiniz. Çalışma örneği için bkz. Bu plnkr.