एंगुलरजेएस परिवर्तन क्रम का संकलन

Question

जहां तक ​​मैंने देखा है कि कोणीय पहली बार चीजों को संकलित करता है, पहले-सेवा आधार जो कि मुश्किल है। मैंने एक निर्देश दिया जो आसपास के कुछ तत्वों को लपेटता है और मैं एक लिंक प्रॉपर्टी चाहता हूं जो सामग्री में सामान की तलाश में है।

एक ठोस यूज-केस के लिए: मैं एक इनपुट लेबल निर्देश जो पहले निवेश के लिए सामग्री के अंदर लग रहा है और कहते हैं बनाने रहा एक बेतरतीब ढंग से input को id और label

यहाँ करने के लिए एक for विशेषता उत्पन्न कोड है :

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

उदाहरण उपयोग:

<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> 

यह स्वयं ही एक आकर्षण की तरह काम करता है।

हालांकि अब मैं कई इनपुट स्वतः उत्पन्न करना चाहता हूं और लेबल को पहले बिंदु पर रखना चाहता हूं। मुद्दा यह है कि जब मैं अपने ng-label के अंदर ng-repeat करता हूं तो ng-repeat मेरे निर्देश संसाधित होने के बाद कोड उत्पन्न होता है इसलिए वास्तव में कुछ भी नहीं मिलता है।

इसलिए मेरा प्रश्न यह है: क्या कोई तरीका है जिसमें आप कोणीय को अन्य तरीकों के बजाय अंदर के नेस्टेड निर्देशों का मूल्यांकन करने के लिए निर्दिष्ट कर सकते हैं?

या, क्या मैं वर्तमान में ऐसा करने का एक बल्लेबाज तरीका हूं?

मैंने ऑर्डर का उदाहरण देने के लिए एक पहेली बना दी जिसमें सामान का मूल्यांकन किया जाता है। तुम देखो बाहरी-निर्देश एक छोटे या बराबर मूल्य होता है की तुलना में यह सामग्री (माइक्रोसेकंड की तुलना में कम नहीं जा सकते तो मैं दोहराता के एक झुंड करना था) है:

http://jsfiddle.net/YLM9P/

Answer 1

कोणीय डॉक्स से:

वरीयता एक भी डोम तत्व पर परिभाषित कई निर्देशों देखते हैं जब, कभी कभी यह जिस क्रम में निर्देशों लागू होते हैं निर्दिष्ट करने के लिए आवश्यक है। प्राथमिकता का उपयोग उनके संकलन कार्यों को कॉल करने से पहले निर्देशों को क्रमबद्ध करने के लिए किया जाता है। प्राथमिकता को एक संख्या के रूप में परिभाषित किया जाता है। अधिक संख्यात्मक प्राथमिकता वाले निर्देश पहले संकलित किए जाते हैं। प्री-लिंक फ़ंक्शंस प्राथमिकता क्रम में भी चलाए जाते हैं, लेकिन पोस्ट-लिंक फ़ंक्शन रिवर्स ऑर्डर में चलाए जाते हैं। समान प्राथमिकता वाले निर्देशों का क्रम अनिर्धारित है। डिफ़ॉल्ट प्राथमिकता है 0.

टर्मिनल अगर सही पर सेट तो वर्तमान प्राथमिकता निर्देश हैं जो निष्पादित करेंगे (वर्तमान प्राथमिकता पर किसी भी निर्देशों अब भी वही प्राथमिकता के आधार पर निष्पादन के आदेश के रूप में निष्पादित करेंगे के अंतिम सेट हो जाएगा अपरिभाषित है)।

तो आपकी समस्या के लिए, मेरा मानना ​​है कि टर्मिनल संपत्ति को सत्य में सेट करने से आपकी समस्या हल हो जाएगी।

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

Answer 2

मुझे लगता है कि आप बहुत सरल बना सकते हैं अपने कोड को हटाएं और मूल तत्व (संभवतः पैरामीटर में गुज़रने) पर फ़ंक्शन अभिव्यक्ति जोड़कर चयनकर्ता (सभी अंगुलर-एस्क्यू नहीं) को हटाएं, फिर उस फ़ंक्शन को ng-repeat के भीतर बच्चे तत्व से कॉल करें। फ़ंक्शन बस उस मान को सेट करेगा जिसका आप उपयोग करेंगे और एक बार सेट हो जाने के बाद आपको पता होगा कि आपके पास पहला है और बाकी को अनदेखा किया जाना चाहिए। यदि आप दिखाते हैं कि आखिरी एचटीएमएल आपके एनजी-दोहराने वाले इनपुट फ़ील्ड के साथ दिखने वाला है तो मैं थोड़ा और विशिष्ट हो सकता हूं।

Answer 3

आप एक उत्परिवर्तन ऑब्सर्वर पंजीकृत करने का प्रयास कर सकते हैं जो DOM में जोड़े गए तत्वों के लिए सुनता है। लेकिन यह आपकी समस्या के लिए एक छोटी सी भूमि के ऊपर हो सकता है - आप तय करते हैं;)

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

यह समस्या, कोणीय में कई अन्य लोगों की तरह, एक अतिरिक्त निर्देश बनाने के द्वारा हल किया जा सकता:

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

require विशेषता के साथ, आप डोम में उच्चतर myLabel निर्देश के नियंत्रक तक पहुंच प्राप्त कर सकते हैं।

यह एक उदाहरण उदाहरण के लिए plnkr देखें।