एक directiveआप वेब घटकों के निर्माण के लिए एक घोषित फैशन में HTML शब्दावली का विस्तार करने की अनुमति देता है। ng-appविशेषता एक निर्देश है, इसलिए है ng-controllerऔर सभी को ng- prefixed attributes। निर्देशों हो सकता है attributes, tagsया यहाँ तक कि class names, comments।
कैसे निर्देशन पैदा होते हैं ( compilationऔर instantiation)
संकलित करें: हम compileफ़ंक्शन को manipulateरेंडर करने से पहले दोनों डोम का उपयोग करेंगे और एक linkफ़ंक्शन वापस करेंगे (जो हमारे लिए लिंकिंग को संभालेंगे)। यह किसी भी तरीके को रखने की जगह है, जिसे instancesइस निर्देश के सभी के साथ साझा करने की आवश्यकता है ।
लिंक: हम linkएक विशिष्ट DOM तत्व पर सभी श्रोताओं को पंजीकृत करने के लिए फ़ंक्शन का उपयोग करेंगे (जो कि टेम्पलेट से क्लोन किया गया है) और हमारे बाइंडिंग को पृष्ठ पर सेट करता है।
यदि compile()फ़ंक्शन में सेट किया गया है तो वे केवल एक बार सेट किए जाएंगे (जो कि अक्सर वही होता है जो आप चाहते हैं)। यदि link()फ़ंक्शन में सेट किया जाता है तो वे हर बार HTML तत्व
ऑब्जेक्ट में डेटा के लिए बाध्य होते हैं ।
<div ng-repeat="i in [0,1,2]">
<simple>
<div>Inner content</div>
</simple>
</div>
app.directive("simple", function(){
return {
restrict: "EA",
transclude:true,
template:"<div>{{label}}<div ng-transclude></div></div>",
compile: function(element, attributes){
return {
pre: function(scope, element, attributes, controller, transcludeFn){
},
post: function(scope, element, attributes, controller, transcludeFn){
}
}
},
controller: function($scope){
}
};
});
Compileफ़ंक्शन रिटर्न preऔर postलिंक फ़ंक्शन। प्री लिंक फंक्शन में हमारे पास इंस्टेंस टेम्प्लेट है और स्कोप भी है controller, लेकिन फिर भी टेम्प्लेट स्कोप के लिए बाध्य नहीं है और अभी भी ट्रांसकॉल्ड कंटेंट नहीं है।
Postलिंक फ़ंक्शन वह जगह है जहां पोस्ट लिंक निष्पादित करने का अंतिम कार्य है। अब transclusionपूरा हो गया है the template is linked to a scope, और view will update with data bound values after the next digest cycle। linkविकल्प के लिए एक स्थापित करने के लिए सिर्फ एक शॉर्टकट है post-linkसमारोह।
नियंत्रक: निर्देशक नियंत्रक को दूसरे निर्देशन लिंकिंग / संकलन चरण में पारित किया जा सकता है। इसे अंतर-निर्देशन संचार में उपयोग करने के लिए अन्य दिशाओं में इंजेक्ट किया जा सकता है।
आपको आवश्यक निर्देश का नाम निर्दिष्ट करना होगा - यह उसी तत्व या उसके माता-पिता के लिए बाध्य होना चाहिए। नाम के साथ उपसर्ग किया जा सकता है:
? – Will not raise any error if a mentioned directive does not exist.
^ – Will look for the directive on parent elements, if not available on the same element.
[‘directive1′, ‘directive2′, ‘directive3′]कई निर्देशों नियंत्रक की आवश्यकता के लिए वर्ग ब्रैकेट का उपयोग करें ।
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope, $element) {
});
app.directive('parentDirective', function() {
return {
restrict: 'E',
template: '<child-directive></child-directive>',
controller: function($scope, $element){
this.variable = "Hi Vinothbabu"
}
}
});
app.directive('childDirective', function() {
return {
restrict: 'E',
template: '<h1>I am child</h1>',
replace: true,
require: '^parentDirective',
link: function($scope, $element, attr, parentDirectCtrl){
//you now have access to parentDirectCtrl.variable
}
}
});