angularjs - अजीब एनजीआईएफ+$ संकलन व्यवहार




angularjs-directive (2)

इस पर विचार करो। एनजीआई पूरे तत्व को हटा देता है और उसे टिप्पणी के साथ बदल देता है तब अभिव्यक्ति के लिए देखा जाता है इसके बाद के परिवर्तन DOM के बीच के तत्व को हटाए जाने के लिए ट्रिगर करते हैं।

अब समस्या यह है, आपने ब्लॉक को कंपाइल चरण के अंदर रखा है। पूरे एनजी-ओफ़ के कोड को एक टिप्पणी द्वारा प्रतिस्थापित किया जाता है।

समाधान के बारे में, कई हो सकते हैं यह सब इस बात पर निर्भर करता है कि संरचना के साथ क्या अच्छी तरह से चला जाता है और यदि आपका ऐप

मैं दो प्रस्ताव:

1) तर्क को 'संकलन' से 'लिंक' चरण पर ले जाएं।

link: function(el){
    el.removeAttr('swipe');
    var fn = $compile(el);
    return function (scope) {
      fn(scope);
    };
 },

2) आपको ट्रांसजेक्शन का उपयोग करने की आवश्यकता होगी।

app.directive('swipe', function($compile){
 return {
  restrict: 'A',
  compile: function(el){
    el.removeAttr('swipe');
    var fn = $compile(el);
    return function (scope) {
      fn(scope);
        };
   },
    transclude: true,
    template: "<div ng-transclude></div>"
 }
});

आपके नमूने के निम्नलिखित फोको आपको मार्गदर्शन कर सकते हैं:

http://jsbin.com/zecujonoqi/1/edit?html,js,output

http://jsbin.com/mubodevofa/1/edit?html,js,output

आशा करता हूँ की ये काम करेगा।

मैं एक निर्देश बनाने की कोशिश कर रहा हूं जो निम्न कार्य करेगा:

  • तत्व के लिए एक अन्य निर्देश जोड़ें (उदाहरण के लिए एनजीस्वाइपराइट)
  • नए निर्देश के लिए कुछ कस्टम व्यवहार जोड़ें।

एक उदाहरण होगा: mySwipeBack जो mySwipeBack जोड़ ngSwipeRight और जब उपयोगकर्ता तत्व पर स्वाइप करेगा तो मैं history.back() करूँगा।

मैंने इस तरह की कोशिश की:

.directive('swipe', function($compile){
  return {
    restrict: 'A',
    compile: function(el){
        // I removed all the actual logic for demo purposes
        // here I would add ng-swipe-right plus a handler
        el.removeAttr('swipe');
        var fn = $compile(el);
        return function (scope) {
          fn(scope);
        };
   }
 }
});

लेकिन मैं निम्नलिखित मार्कअप के साथ एक समस्या में गया:

<div ng-if='true'>
  <h1 swipe>OUTSIDE
    <div ng-if="true">INSIDE</div>
  </h1>
</div>

"अंदर" टेक्स्ट गाया नहीं जाता है आप इस जेएसबीएन में व्यवहार देख सकते हैं: http://jsbin.com/tokofevuga/edit?html,js,output

अगर मैं पहली एनजी-अगर हटाता हूं, तो यह उद्देश्य से काम करता है।

क्या किसी को पता है कि इसके पीछे कारण क्या है - और अगर मैं इसे काम कर सकता हूं?

या अगर किसी के पास एक और विचार है जिसे मैंने ऊपर वर्णित किया है कि कैसे प्राप्त करना है?


    return function (scope) {
      $compile(el)(scope);
    };

मेरे लिए काम करें ... और यह मुद्दा यह है कि आपके कोड में - आप तुरंत निर्देश संकलन में तत्व संकलित करते हैं, जबकि फ़ंक्शन को संकलन से वापस किया जाता है, इसे बाद में कुछ निष्पादित किया जाएगा।





angularjs-directive