একটি directiveআপনাকে ওয়েব উপাদান তৈরির জন্য ঘোষিত ফ্যাশনে এইচটিএমএল শব্দভাণ্ডার প্রসারিত করতে দেয়। ng-appঅ্যাট্রিবিউট একটি নির্দেশ, তাই হয় ng-controllerএবং সব ng- prefixed attributes। দিকনির্দেশনাগুলি হতে পারে attributes, tagsবা এমনকি class names,ও হতে পারে comments।
নির্দেশিকা কীভাবে জন্মগ্রহণ করে ( compilationএবং instantiation)
সংকলন: আমরা ডিওএম রেন্ডার করার আগে compileফাংশনটি উভয়ই ব্যবহার করব manipulateএবং কোনও linkফাংশন ফেরত দেব (এটি আমাদের জন্য সংযোগ পরিচালনা করবে)। instancesএই নির্দেশের সমস্তটির সাথে ভাগ করে নেওয়া দরকার এমন কোনও পদ্ধতি রাখার জায়গাও এটি।
লিঙ্ক: আমরা linkনির্দিষ্ট শ্রোতাগুলিকে একটি নির্দিষ্ট ডিওএম উপাদান (যা টেমপ্লেট থেকে ক্লোন করা আছে) তে নিবন্ধিত করতে এবং পৃষ্ঠাতে আমাদের বাইন্ডিংগুলি সেট আপ করতে আমরা ফাংশনটি ব্যবহার করব ।
যদি compile()ফাংশনে সেট করা থাকে তবে সেগুলি কেবল একবার সেট করা হত (যা প্রায়শই আপনি চান)। যদি link()ফাংশনে সেট করা থাকে তবে প্রতিবার এইচটিএমএল উপাদানটি
বস্তুর ডেটাতে আবদ্ধ হলে সেগুলি সেট করা হবে ।
<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
}
}
});