एक निर्देश

Question

कोणीय कोड placed on jsfiddle में $ संकलन ($ तत्व) ($ गुंजाइश) बुला $compile($element)($scope) उपयोग करता है और कार्रवाई एनजी क्लिक होने की दो बार का कारण बनता है कि एक कस्टम निर्देश, के बारे में है का उद्देश्य क्या है: मेरे सवाल कर रहे हैं :

• मैं समझना चाहता हूं, एनजी-क्लिक कार्रवाई क्यों हो रही है?
• $compile($element)($scope) पर कॉल करने का उद्देश्य क्या है?
• यदि यह नहीं कहा जाता है तो क्या होता है, को किस परिस्थिति में कहा जाना चाहिए?

---

यहाँ विवरण हैं और मैं अब तक क्या इकट्ठे हुए हैं:

मैं समझता हूँ चाहते हैं, क्यों एनजी क्लिक कार्रवाई दो बार हो रहा है? निम्न पंक्ति कस्टम निर्देश "हैलो" और एक बटन पर एनजी-क्लिक दिखाती है। कस्टम निर्देश $compile($element)($scope) पर कॉल करता है और यही वह रेखा है जो कार्रवाई को दो बार निकाल दिया जाता है, लेकिन मुझे समझ में नहीं आता कि कैसे?

टेस्ट क्लिक करें! http://jsfiddle.net/4x4L3gtw/27/

<div ng-app='myApp' ng-controller='DirectiveTestController'> 
    <button hello ng-click="testClick()">Test CLICK!</button> 
</div> 

var myApp = angular.module('myApp', []); 
myApp.controller('DirectiveTestController', ['$scope', 

function ($scope) { 
    $scope.testClick = function() { 
     window.alert("hey"); 
     console.log("hey"); 
    } 
}]); 
myApp.directive('hello', function() { 
    return { 
     scope: true, 
     controller: ['$scope', '$element', '$compile', function ($scope, $element, $compile) { 
      $element.removeAttr('hello'); 
      //   $element.removeAttr('ng-click'); 
      $compile($element)($scope); 
     }] 

    }; 
}); 

$compile($element)($scope) बुला का उद्देश्य क्या है, क्या करता है, तो यह नहीं कहा जाता है और होता है किस परिस्थिति में यह कहा जाना चाहिए -

यहाँ कोड है?

(बटन पर क्लिक करें और आप देखेंगे कि कार्रवाई में दो बार होता है)

निर्देश के इरादे को छिपाने/कुछ तर्क के आधार पर निष्क्रिय करने के लिए है। इसलिए इस निर्देश में मैं $element.removeAttr("ng-hide") इत्यादि देखता हूं, और प्रत्येक बार $element.removeAttr कहा जाता है कि इसे $compile($element)($scope) के साथ किया जाता है, क्या डीओएम को फिर से लिखने का उद्देश्य है?

मैंने डीओएम की जांच की और मुझे कई बार परिभाषित एनजी-क्लिक नहीं दिखाई देता है। डीओएम (फायरबग) की जांच करते समय, मैंने $ element-> 0-> विशेषताओं-> एनजी-क्लिक (अन्य तत्वों के बीच) को देखा।

यदि मैं $element.removeAttr("ng-click") का उपयोग करके एनजी-क्लिक हटा देता हूं तो कार्रवाई केवल एक बार होती है। या यदि मैं $compile($element)($scope) हटा देता हूं तो कार्रवाई केवल एक बार होती है।

Answer 1

मुझे लगता है कि इस तरह के आपरेशनों (एचटीएमएल) के साथ लिंक (नियंत्रक में नहीं) में होना चाहिए:

link: function (scope, element) { element.removeAttr('hello'); }

http://jsfiddle.net/4x4L3gtw/32/

Answer 2

संकलन - $ compileProvider - मॉड्यूल एनजी में सेवा एक संकलित एचटीएमएल स्ट्रिंग या डोम टेम्पलेट में और टेम्पलेट फ़ंक्शन का उत्पादन करता है, जिसका उपयोग तब स्कोप और टेम्पलेट को एक साथ जोड़ने के लिए किया जा सकता है।

संकलन डीओएम पेड़ को चलाने और निर्देशों के लिए डीओएम तत्वों से मेल खाने की प्रक्रिया है।

Answer 3

मुझे लगता है कि यह क्यों हो रहा है इसका मुख्य कारण यह है कि आप इस घटना को सीधे निर्देश में परिभाषित करने के बजाय, उस तत्व में एक क्लिक ईवेंट का उपयोग कर रहे हैं जहां आप निर्देश लागू करते हैं। इसलिए आपको बटन तत्व से क्लिक प्राप्त हो रहा है, लेकिन निर्देशक नियंत्रक से भी क्लिक प्राप्त हो रहा है।

मार्कअप के खिलाफ एक बार जो भी संकलन किया जाता है, वह एक फ़ंक्शन का उत्पादन करेगा जो आप किसी विशेष दायरे के खिलाफ मार्कअप को बांधने के लिए उपयोग कर सकते हैं (क्या कोणीय लिंकिंग फ़ंक्शन को कॉल करता है), यही कारण है कि Rodion लिंक का उपयोग करने का सुझाव दिया गया है, मुझे लगता है। इस विशेष मामले में, इसका मतलब है कि आप सीधे तत्व बटन में एक ईवेंट का उपयोग कर रहे हैं, लेकिन उसके बाद $ compile का उपयोग करके इसे अपने निर्देश में दायरे से फिर से जोड़ रहे हैं। मुझे लगता है कि यही कारण है कि आप संदेश दो बार प्राप्त करते हैं।

जैसा कि मुझे नहीं पता कि यह स्पष्ट है, मैंने इस लिंक http://odetocode.com/blogs/scott/archive/2014/05/07/using-compile-in-angular.aspx से जानकारी प्राप्त की है, जहां यह बेहतर ढंग से समझाया गया है।

यहां एक जेएसफ़िल्ड भी है जहां आप देख सकते हैं कि यह कैसे काम करता है (ऊपर दिए गए लेख से उद्धरण)।

app.directive("otcDynamic", function($compile){ 
    return { 
     link: function(scope, element){ 
      var template = "<button ng-click='doSomething()'>{{label}}</button>"; 
      var content = $compile(template)(scope); 
      element.append(content); 
     } 
    }; 
}); 

JSFiddle