AngularJS
कस्टम निर्देश
खोज…
परिचय
यहाँ आप AngularJS के Directives फ़ीचर के बारे में जानेंगे। नीचे आपको निर्देश मिलेंगे कि क्या निर्देश हैं, साथ ही बेसिक और उन्नत उदाहरण हैं कि उनका उपयोग कैसे करें।
पैरामीटर
| पैरामीटर | विवरण |
|---|---|
| क्षेत्र | संपत्ति निर्देश के दायरे को निर्धारित करने के लिए। इसे झूठे, सच्चे या एक अलग दायरे के रूप में सेट किया जा सकता है: {@, =, <, &}। |
| गुंजाइश: झूठा | निर्देशक मूल क्षेत्र का उपयोग करता है। निर्देशन के लिए कोई गुंजाइश नहीं बनाई गई। |
| गुंजाइश: सच है | निर्देशन एक नए बच्चे के दायरे के रूप में मूल रूप से मूल रूप से मूल दायरे को विरासत में लेता है। यदि नए तत्व का अनुरोध करने वाले एक ही तत्व पर कई निर्देश हैं, तो वे एक नए दायरे को साझा करेंगे। |
| गुंजाइश: {@} | डोम विशेषता मान के लिए एक निर्देश क्षेत्र संपत्ति का बंधन। जैसा कि माता-पिता में बाध्य विशेषता मान है, यह निर्देश क्षेत्र में बदल जाएगा। |
| गुंजाइश: {=} | द्वि-दिशात्मक विशेषता बाइंडिंग जो माता-पिता में विशेषता को बदल देती है यदि निर्देश गुण बदल जाता है और इसके विपरीत। |
| गुंजाइश: {<} | एक निर्देश गुंजाइश संपत्ति और एक डोम विशेषता अभिव्यक्ति के बंधन का एक तरीका है। अभिभावक में अभिव्यक्ति का मूल्यांकन किया जाता है। यह मूल मूल्य की पहचान को देखता है इसलिए माता-पिता में एक वस्तु संपत्ति में परिवर्तन निर्देश में परिलक्षित नहीं होगा। एक निर्देश में एक वस्तु संपत्ति में परिवर्तन माता-पिता में परिलक्षित होगा, क्योंकि दोनों एक ही वस्तु को संदर्भित करते हैं |
| गुंजाइश: {&} | माता-पिता में मूल्यांकन करने के लिए निर्देश को डेटा को पास करने की अनुमति देता है। |
| संकलन: कार्य | इस फ़ंक्शन का उपयोग लिंक फ़ंक्शन के चलने से पहले निर्देश टेम्पलेट पर DOM परिवर्तन करने के लिए किया जाता है। यह tElement (निर्देशन टेम्पलेट) और tAttr (निर्देश पर घोषित विशेषताओं की सूची) को स्वीकार करता है। इसकी गुंजाइश नहीं है। यह एक समारोह है कि एक के रूप में पंजीकृत किया जाएगा वापस आ सकते हैं post-link समारोह या इसके साथ एक वस्तु वापस आ सकते हैं pre और post के रूप में पंजीकृत किया जाएगा साथ गुण pre-link और post-link कार्य करता है। |
| लिंक: फ़ंक्शन / ऑब्जेक्ट | लिंक संपत्ति को एक फ़ंक्शन या ऑब्जेक्ट के रूप में कॉन्फ़िगर किया जा सकता है। यह निम्नलिखित तर्क प्राप्त कर सकता है: गुंजाइश (निर्देशात्मक गुंजाइश), iElement (DOM तत्व जहां निर्देश लागू होता है), iAttrs (DOM तत्व विशेषताओं का संग्रह), नियंत्रक (निर्देशक द्वारा आवश्यक नियंत्रकों का सरणी), transcludedn। इसका उपयोग मुख्य रूप से DOM श्रोताओं को स्थापित करने, परिवर्तनों के लिए मॉडल गुण देखने और DOM को अपडेट करने के लिए किया जाता है। टेम्पलेट के क्लोन होने के बाद यह निष्पादित होता है। यदि कोई संकलन फ़ंक्शन नहीं है, तो इसे स्वतंत्र रूप से कॉन्फ़िगर किया गया है। |
| पूर्व-लिंक फ़ंक्शन | लिंक फ़ंक्शन जो किसी भी बच्चे लिंक फ़ंक्शन से पहले निष्पादित होता है। डिफ़ॉल्ट रूप से, चाइल्ड डायरेक्टिव लिंक फ़ंक्शंस पेरेंट डाइरेक्टिव लिंक फ़ंक्शंस से पहले निष्पादित होते हैं और प्री-लिंक फंक्शन माता-पिता को पहले लिंक करने में सक्षम बनाता है। एक उपयोग का मामला है यदि बच्चे को माता-पिता से डेटा की आवश्यकता होती है। |
| लिंक के बाद का कार्य | लिंक फ़ंक्शन जो बच्चे के तत्वों के बाद अधिकारियों को माता-पिता से जोड़ा जाता है। यह आमतौर पर घटना संचालकों को संलग्न करने और बच्चे के निर्देशों तक पहुंचने के लिए उपयोग किया जाता है, लेकिन बच्चे के निर्देश के लिए आवश्यक डेटा को यहां सेट नहीं किया जाना चाहिए क्योंकि बच्चे का निर्देश पहले से ही जुड़ा हुआ है। |
| प्रतिबंधित: स्ट्रिंग | डोम के भीतर से निर्देश को कॉल करने का तरीका परिभाषित करता है। संभावित मान (हमारा निर्देशन नाम demoDirective ): E - एलिमेंट नाम ( <demo-directive></demo-directive> ), A - एट्रिब्यूट ( <div demo-directive></div> ), C - मैचिंग क्लास ( <div class="demo-directive"></div> ), M - टिप्पणी के द्वारा ( <!-- directive: demo-directive --> )। restrict संपत्ति भी कई विकल्पों का समर्थन कर सकती है, उदाहरण के लिए - restrict: "AC" निर्देश को गुण या वर्ग को प्रतिबंधित करेगा। यदि छोड़ा गया है, तो डिफ़ॉल्ट मान "EA" (तत्व या गुण) है। |
| आवश्यकता: 'डेमोडायरेक्टिव' | वर्तमान तत्व पर डेमोडायरेक्टिव के नियंत्रक का पता लगाएँ और इसके नियंत्रक को लिंकिंग फ़ंक्शन के चौथे तर्क के रूप में इंजेक्ट करें। नहीं मिलने पर त्रुटि फेंको। |
| आवश्यकता है: '? डेमोडायरेक्टिव' | डेमोडायरेक्टिव के नियंत्रक का पता लगाने या लिंक fn के लिए अशक्त नहीं पाए जाने पर पास करने का प्रयास करें। |
| आवश्यकता है: '^ डेमोडायरेक्टिव' | तत्व और उसके माता-पिता की खोज करके डेमोडायरेक्टिव कंट्रोलर का पता लगाएँ। नहीं मिलने पर त्रुटि फेंको। |
| आवश्यकता है: '^ ^ डेमोडायरेक्टिव' | तत्व के माता-पिता की खोज करके डेमोडायरेक्टिव कंट्रोलर का पता लगाएँ। नहीं मिलने पर त्रुटि फेंको। |
| आवश्यकता है: '^ डेमोडायरेक्टिव' | तत्व और उसके माता-पिता की खोज करके डेमोडायरेक्टिव के कंट्रोलर का पता लगाने का प्रयास करें या यदि नहीं मिला तो लिंक fn को पास कर दें। |
| आवश्यकता है: '^ ^ डेमोडायरेक्टिव' | तत्व के माता-पिता की खोज करके डेमोडायरेक्टिव के नियंत्रक का पता लगाने का प्रयास करें, या नहीं मिलने पर लिंक fn के लिए अशक्त पास करें। |
कस्टम निर्देशों का निर्माण और उपभोग करना
निर्देश कोणीयज की सबसे शक्तिशाली विशेषताओं में से एक हैं। कस्टम angularjs निर्देशों का उपयोग HTML के कार्यक्षमता को बढ़ाने के लिए नए html तत्वों या कस्टम विशेषताओं को HTML टैग में कुछ व्यवहार प्रदान करने के लिए किया जाता है।
directive.js
// Create the App module if you haven't created it yet
var demoApp= angular.module("demoApp", []);
// If you already have the app module created, comment the above line and create a reference of the app module
var demoApp = angular.module("demoApp");
// Create a directive using the below syntax
// Directives are used to extend the capabilities of html element
// You can either create it as an Element/Attribute/class
// We are creating a directive named demoDirective. Notice it is in CamelCase when we are defining the directive just like ngModel
// This directive will be activated as soon as any this element is encountered in html
demoApp.directive('demoDirective', function () {
// This returns a directive definition object
// A directive definition object is a simple JavaScript object used for configuring the directive’s behaviour,template..etc
return {
// restrict: 'AE', signifies that directive is Element/Attribute directive,
// "E" is for element, "A" is for attribute, "C" is for class, and "M" is for comment.
// Attributes are going to be the main ones as far as adding behaviors that get used the most.
// If you don't specify the restrict property it will default to "A"
restrict :'AE',
// The values of scope property decides how the actual scope is created and used inside a directive. These values can be either “false”, “true” or “{}”. This creates an isolate scope for the directive.
// '@' binding is for passing strings. These strings support {{}} expressions for interpolated values.
// '=' binding is for two-way model binding. The model in parent scope is linked to the model in the directive's isolated scope.
// '&' binding is for passing a method into your directive's scope so that it can be called within your directive.
// The method is pre-bound to the directive's parent scope, and supports arguments.
scope: {
name: "@", // Always use small casing here even if it's a mix of 2-3 words
},
// template replaces the complete element with its text.
template: "<div>Hello {{name}}!</div>",
// compile is called during application initialization. AngularJS calls it once when html page is loaded.
compile: function(element, attributes) {
element.css("border", "1px solid #cccccc");
// linkFunction is linked with each element with scope to get the element specific data.
var linkFunction = function($scope, element, attributes) {
element.html("Name: <b>"+$scope.name +"</b>");
element.css("background-color", "#ff00ff");
};
return linkFunction;
}
};
});
इस निर्देश का उपयोग इस प्रकार किया जा सकता है:
<html>
<head>
<title>Angular JS Directives</title>
</head>
<body>
<script src = "//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="directive.js"></script>
<div ng-app = "demoApp">
<!-- Notice we are using Spinal Casing here -->
<demo-directive name="World"></demo-directive>
</div>
</body>
</html>
डायरेक्टिव डेफिनिशन ऑब्जेक्ट टेम्पलेट
demoApp.directive('demoDirective', function () {
var directiveDefinitionObject = {
multiElement:
priority:
terminal:
scope: {},
bindToController: {},
controller:
controllerAs:
require:
restrict:
templateNamespace:
template:
templateUrl:
transclude:
compile:
link: function(){}
};
return directiveDefinitionObject;
});
-
multiElement- निर्देश के नाम के प्रारंभ और अंत के बीच सही और किसी भी डोम नोड पर सेट किया जाएगा और निर्देश तत्वों के साथ एक साथ समूहीकृत किया जाएगा -
priority- निर्देश को लागू करने की अनुमति देता है जब एक ही DOM तत्व पर कई निर्देश परिभाषित किए जाते हैं। उच्च संख्या वाले निर्देशों को पहले संकलित किया जाता है। -
terminal- सही पर सेट और वर्तमान प्राथमिकता निष्पादित करने के लिए निर्देशों का अंतिम सेट होगा -
scope- निर्देश का दायरा निर्धारित करता है -
bind to controller- डायरेक्ट्री कंट्रोलर को स्कोप प्रॉपर्टीज़ को सीधे बाँधता है -
controller- कंट्रोलर कंस्ट्रक्टर फंक्शन -
require- एक और निर्देश की आवश्यकता है और इसके नियंत्रक को लिंकिंग फ़ंक्शन के चौथे तर्क के रूप में इंजेक्ट करें -
controllerAs- निर्देश के दायरे में नियंत्रक का नाम संदर्भ नियंत्रक को निर्देश टेम्पलेट से संदर्भित करने की अनुमति देता है। -
restrict- तत्व, गुण, वर्ग, या टिप्पणी के निर्देश को प्रतिबंधित करें -
templateNameSpace- निर्देशक टेम्पलेट द्वारा उपयोग किए जाने वाले दस्तावेज़ प्रकार सेट करता है: html, svg, या गणित। html डिफ़ॉल्ट है -
template- html मार्कअप जो निर्देश के तत्व की सामग्री को प्रतिस्थापित करने में चूक करता है, या यदि ट्रांसकॉल्यूड सत्य है, तो निर्देशक तत्व की सामग्री को लपेटता है -
templateUrl- url को टेम्पलेट के लिए एसिंक्रोनस रूप से प्रदान किया गया है -
transclude- जहां तत्व प्रकट होता है उस तत्व की सामग्री निकालें और इसे निर्देश को उपलब्ध कराएं। सामग्री को संकलित फ़ंक्शन के रूप में संकलित किया जाता है और निर्देश को प्रदान किया जाता है। -
compile- टेम्पलेट DOM को बदलने के लिए फ़ंक्शन -
link- केवल तभी उपयोग किया जाता है जब संकलित संपत्ति को परिभाषित नहीं किया जाता है। DOM श्रोताओं को पंजीकृत करने के साथ-साथ DOM को अपडेट करने के लिए लिंक फ़ंक्शन जिम्मेदार है। टेम्पलेट के क्लोन होने के बाद इसे निष्पादित किया जाता है।
मूल निर्देश उदाहरण
सुपरमैन-directive.js
angular.module('myApp', [])
.directive('superman', function() {
return {
// restricts how the directive can be used
restrict: 'E',
templateUrl: 'superman-template.html',
controller: function() {
this.message = "I'm superman!"
},
controllerAs: 'supermanCtrl',
// Executed after Angular's initialization. Use commonly
// for adding event handlers and DOM manipulation
link: function(scope, element, attributes) {
element.on('click', function() {
alert('I am superman!')
});
}
}
});
सुपरमैन-template.html
<h2>{{supermanCtrl.message}}</h2>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="superman-directive.js"><script/>
</head>
<body>
<div ng-app="myApp">
<superman></superman>
</div>
</body>
</html>
आप निर्देशों पर restrict निर्देशों के बारे में अधिक जानकारी प्राप्त कर सकते हैं और निर्देशों पर एंगुलरजेएस के आधिकारिक दस्तावेज पर link कार्य कर सकते हैं
निर्देशन का उपयोग करते हुए रिजुवेबल कंपोनेंट कैसे बनाएं
AngularJS निर्देश हैं जो एक AngularJS एप्लिकेशन के अंदर HTML के प्रतिपादन को नियंत्रित करता है। वे एक एचटीएमएल तत्व, विशेषता, वर्ग या एक टिप्पणी हो सकते हैं। डोम का हेरफेर करने के लिए निर्देशों का उपयोग किया जाता है, एचटीएमएल तत्वों, डेटा बाइंडिंग और कई और अधिक नए व्यवहार संलग्न करता है। निर्देशों के कुछ उदाहरण जो कोणीय प्रदान करते हैं एनजी-मॉडल, एनजी-छिपाने, एनजी-इफ।
इसी तरह कोई भी व्यक्ति अपने स्वयं के कस्टम निर्देश बना सकता है और उन्हें बदलने योग्य बना सकता है। कस्टम निर्देश संदर्भ बनाने के लिए। पुन: प्रयोज्य निर्देशों को बनाने के पीछे का अर्थ है कि आपके द्वारा लिखे गए निर्देशों / घटकों का एक सेट बनाना है जैसे कि angularjs हमें angular.js का उपयोग करके प्रदान करता है। ये पुन: प्रयोज्य निर्देश विशेष रूप से बहुत उपयोगी हो सकते हैं जब आपके पास एप्लिकेशन / एप्लिकेशन का सूट होता है जिसे एक सुसंगत व्यवहार, रूप और अनुभव की आवश्यकता होती है। इस तरह के पुन: प्रयोज्य घटक का एक उदाहरण एक सरल टूलबार हो सकता है जिसे आप अपने एप्लिकेशन या विभिन्न अनुप्रयोगों में उपयोग करना चाहते हैं, लेकिन आप चाहते हैं कि वे समान व्यवहार करें या समान दिखें।
सबसे पहले, अपने ऐप फ़ोल्डर में resuableCompords नाम का एक फ़ोल्डर बनाएं और reusableModuleApp.js बनाएं
reusableModuleApp.js:
(function(){
var reusableModuleApp = angular.module('resuableModuleApp', ['ngSanitize']);
//Remember whatever dependencies you have in here should be injected in the app module where it is intended to be used or it's scripts should be included in your main app
//We will be injecting ng-sanitize
resubaleModuleApp.directive('toolbar', toolbar)
toolbar.$inject=['$sce'];
function toolbar($sce){
return{
restrict :'AE',
//Defining below isolate scope actually provides window for the directive to take data from app that will be using this.
scope : {
value1: '=',
value2: '=',
},
}
template : '<ul> <li><a ng-click="Add()" href="">{{value1}}</a></li> <li><a ng-click="Edit()" href="#">{{value2}}</a></li> </ul> ',
link : function(scope, element, attrs){
//Handle's Add function
scope.Add = function(){
};
//Handle's Edit function
scope.Edit = function(){
};
}
}
});
mainApp.js:
(function(){
var mainApp = angular.module('mainApp', ['reusableModuleApp']); //Inject resuableModuleApp in your application where you want to use toolbar component
mainApp.controller('mainAppController', function($scope){
$scope.value1 = "Add";
$scope.value2 = "Edit";
});
});
index.html:
<!doctype html>
<html ng-app="mainApp">
<head>
<title> Demo Making a reusable component
<head>
<body ng-controller="mainAppController">
<!-- We are providing data to toolbar directive using mainApp'controller -->
<toolbar value1="value1" value2="value2"></toolbar>
<!-- We need to add the dependent js files on both apps here -->
<script src="js/angular.js"></script>
<script src="js/angular-sanitize.js"></script>
<!-- your mainApp.js should be added afterwards --->
<script src="mainApp.js"></script>
<!-- Add your reusable component js files here -->
<script src="resuableComponents/reusableModuleApp.js"></script>
</body>
</html>
डिफ़ॉल्ट रूप से निर्देश पुन: प्रयोज्य घटक हैं। जब आप अलग कोणीय मॉड्यूल में निर्देश बनाते हैं, तो यह वास्तव में विभिन्न कोणीय अनुप्रयोगों के दौरान इसे निर्यात करने योग्य और पुन: प्रयोज्य बनाता है। नए निर्देश बस reusableModuleApp.js और reusableModuleApp के अंदर जोड़े जा सकते हैं यह व्यवहार को परिभाषित करने के लिए निर्देश के अंदर स्वयं नियंत्रक, सेवाएँ, DDO ऑब्जेक्ट हो सकता है।
टेम्पलेट के साथ मूल निर्देश और एक अलग गुंजाइश
अलग-अलग दायरे के साथ एक कस्टम निर्देश बनाने से बाहरी दायरे से निर्देश के अंदर का दायरा अलग हो जाएगा, ताकि हमारे निर्देश को गलती से माता-पिता के दायरे में डेटा को बदलने से रोका जा सके और इसे माता-पिता के दायरे से निजी डेटा को पढ़ने से प्रतिबंधित किया जा सके।
एक अलग गुंजाइश बनाने के लिए और अभी भी हमारे कस्टम निर्देश को बाहरी दायरे के साथ संवाद करने की अनुमति देता है, हम उस scope विकल्प का उपयोग कर सकते हैं जो यह बताता है कि बाहरी दायरे के साथ निर्देश के आंतरिक दायरे के बाइंडिंग को कैसे मैप किया जाए।
वास्तविक बाइंडिंग निर्देश से जुड़ी अतिरिक्त विशेषताओं के साथ बनाई गई है। बाइंडिंग सेटिंग को scope ऑप्शन और की-वैल्यू पेयर वाली ऑब्जेक्ट के साथ परिभाषित किया गया है:
- एक कुंजी , जो हमारे निर्देशन की पृथक गुंजाइश संपत्ति के अनुरूप है
- एक मान , जो कोणीय को बताता है कि एक मिलान विशेषता के निर्देशात्मक आंतरिक दायरे को कैसे बांधते हैं
एक अलग दायरे के साथ एक निर्देश का सरल उदाहरण:
var ProgressBar = function() {
return {
scope: { // This is how we define an isolated scope
current: '=', // Create a REQUIRED bidirectional binding by using the 'current' attribute
full: '=?maxValue' // Create an OPTIONAL (Note the '?'): bidirectional binding using 'max-value' attribute to the `full` property in our directive isolated scope
}
template: '<div class="progress-back">' +
' <div class="progress-bar"' +
' ng-style="{width: getProgress()}">' +
' </div>' +
'</div>',
link: function(scope, el, attrs) {
if (scope.full === undefined) {
scope.full = 100;
}
scope.getProgress = function() {
return (scope.current / scope.size * 100) + '%';
}
}
}
}
ProgressBar.$inject = [];
angular.module('app').directive('progressBar', ProgressBar);
उदाहरण है कि इस निर्देश का उपयोग कैसे करें और नियंत्रक के दायरे से निर्देश के आंतरिक दायरे में डेटा को बाँधें:
नियंत्रक:
angular.module('app').controller('myCtrl', function($scope) {
$scope.currentProgressValue = 39;
$scope.maxProgressBarValue = 50;
});
राय:
<div ng-controller="myCtrl">
<progress-bar current="currentProgressValue"></progress-bar>
<progress-bar current="currentProgressValue" max-value="maxProgressBarValue"></progress-bar>
</div>
एक पुन: प्रयोज्य घटक का निर्माण
पुन: प्रयोज्य घटकों के निर्माण के लिए निर्देशों का उपयोग किया जा सकता है। यहाँ एक "उपयोगकर्ता बॉक्स" घटक का एक उदाहरण है:
userBox.js
angular.module('simpleDirective', []).directive('userBox', function() {
return {
scope: {
username: '=username',
reputation: '=reputation'
},
templateUrl: '/path/to/app/directives/user-box.html'
};
});
Controller.js
var myApp = angular.module('myApp', ['simpleDirective']);
myApp.controller('Controller', function($scope) {
$scope.user = "John Doe";
$scope.rep = 1250;
$scope.user2 = "Andrew";
$scope.rep2 = 2850;
});
myPage.js
<html lang="en" ng-app="myApp">
<head>
<script src="/path/to/app/angular.min.js"></script>
<script src="/path/to/app/js/controllers/Controller.js"></script>
<script src="/path/to/app/js/directives/userBox.js"></script>
</head>
<body>
<div ng-controller="Controller">
<user-box username="user" reputation="rep"></user-box>
<user-box username="user2" reputation="rep2"></user-box>
</div>
</body>
</html>
उपयोगकर्ता के box.html
<div>{{username}}</div>
<div>{{reputation}} reputation</div>
परिणाम होगा:
John Doe
1250 reputation
Andrew
2850 reputation
निर्देशक डेकोरेटर
कभी-कभी आपको निर्देश से अतिरिक्त सुविधाओं की आवश्यकता हो सकती है। निर्देश को फिर से लिखने (कॉपी) करने के बजाय, आप यह संशोधित कर सकते हैं कि निर्देश कैसे व्यवहार करता है।
डेकोरेटर को $ इंजेक्शन चरण के दौरान निष्पादित किया जाएगा।
ऐसा करने के लिए, अपने मॉड्यूल में एक .config साबित करें। निर्देश को MyDirective कहा जाता है, इसलिए आपको myDirectiveDirective को कॉन्फ़िगर करना होगा। (यह एक कोणीय सम्मेलन में [प्रदाताओं के बारे में पढ़ें])।
यह उदाहरण निर्देश के टेम्पलेट को बदल देगा:
angular.module('myApp').config(function($provide){
$provide.decorator('myDirectiveDirective', function($delegate){
var directive = $delegate[0]; // this is the actual delegated, your directive
directive.templateUrl = 'newTemplate.html'; // you change the directive template
return $delegate;
})
});
जब क्लिक किया जाता है, तो यह उदाहरण निर्देश तत्व पर एक ऑनक्लिक घटना जोड़ता है, यह संकलन चरण के दौरान होता है।
angular.module('myApp').config(function ($provide) {
$provide.decorator('myDirectiveTwoDirective', function ($delegate) {
var directive = $delegate[0];
var link = directive.link; // this is directive link phase
directive.compile = function () { // change the compile of that directive
return function (scope, element, attrs) {
link.apply(this, arguments); // apply this at the link phase
element.on('click', function(){ // when add an onclick that log hello when the directive is clicked.
console.log('hello!');
});
};
};
return $delegate;
});
});
इसी तरह के दृष्टिकोण का उपयोग प्रदाता और सेवाओं दोनों के लिए किया जा सकता है।
निर्देशकीय विरासत और अंतर्संचालनीयता
कोणीय js निर्देशों को नेस्टेड किया जा सकता है या इंटरऑपरेबल बनाया जा सकता है।
इस उदाहरण में, निर्देशक अदिर का निर्देशन बीडीआर के लिए है, यह नियंत्रक $ गुंजाइश है, क्योंकि बदीर को अदिर की आवश्यकता है।
angular.module('myApp',[]).directive('Adir', function () {
return {
restrict: 'AE',
controller: ['$scope', function ($scope) {
$scope.logFn = function (val) {
console.log(val);
}
}]
}
})
आवश्यकता निर्धारित करने के लिए सुनिश्चित करें: '^ Adir' (कोणीय प्रलेखन को देखें, कुछ संस्करणों को ^ वर्ण की आवश्यकता नहीं है)।
.directive('Bdir', function () {
return {
restrict: 'AE',
require: '^Adir', // Bdir require Adir
link: function (scope, elem, attr, Parent) {
// Parent is Adir but can be an array of required directives.
elem.on('click', function ($event) {
Parent.logFn("Hello!"); // will log "Hello! at parent dir scope
scope.$apply(); // apply to parent scope.
});
}
}
}]);
आप अपने निर्देशन को इस तरह से बना सकते हैं:
<div a-dir><span b-dir></span></div>
<a-dir><b-dir></b-dir> </a-dir>
यह आवश्यक नहीं है कि आपके HTML में निर्देश नस्ट हों।