AngularJS में कस्टम निर्देश: कैसे बनाएं? [उदाहरण]

कस्टम डायरेक्टिव क्या है?

A कस्टम निर्देश AngularJS में एक उपयोगकर्ता-परिभाषित निर्देश है जो उपयोगकर्ताओं को HTML कार्यक्षमता का विस्तार करने के लिए वांछित फ़ंक्शन का उपयोग करने की सुविधा प्रदान करता है। इसे “निर्देश” फ़ंक्शन का उपयोग करके परिभाषित किया जा सकता है, और यह उस तत्व को प्रतिस्थापित करता है जिसके लिए इसका उपयोग किया जाता है। भले ही AngularJS में बहुत सारे शक्तिशाली निर्देश हैं, लेकिन कभी-कभी कस्टम निर्देशों की आवश्यकता होती है।

कस्टम डायरेक्टिव कैसे बनाएं?

आइए एक उदाहरण देखें कि हम AngularJS कस्टम डायरेक्टिव कैसे बना सकते हैं।

हमारे मामले में कस्टम डायरेक्टिव केवल एक div टैग को इंजेक्ट करने जा रहा है, जिसमें डायरेक्टिव को कॉल करने पर हमारे पेज में "AngularJS ट्यूटोरियल" टेक्स्ट होगा।

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp">
    <div ng-guru=""></div>

</div>

<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.directive('ngGuru',function(){

    return {
        template: '<div>Angular JS Tutorial</div>'
    }
    });

</script>

</body>
</html>

कस्टम निर्देश बनाएँ

कोड स्पष्टीकरण

  1. हम पहले एक बना रहे हैं मॉड्यूल हमारे कोणीय अनुप्रयोग के लिए। कस्टम निर्देश बनाने के लिए यह आवश्यक है क्योंकि निर्देश इस मॉड्यूल का उपयोग करके बनाया जाएगा।
  2. अब हम "ngGuru" नामक एक कस्टम डायरेक्टिव बना रहे हैं और एक फ़ंक्शन परिभाषित कर रहे हैं जिसमें हमारे डायरेक्टिव के लिए कस्टम कोड होगा।नोट: - ध्यान दें कि निर्देश को परिभाषित करते समय, हमने इसे ngGuru के रूप में परिभाषित किया है जिसमें अक्षर 'G' कैपिटल है। और जब हम इसे अपने div टैग से निर्देश के रूप में एक्सेस करते हैं तो हम इसे ng-guru के रूप में एक्सेस कर रहे होते हैं। इस तरह से Angular किसी एप्लिकेशन में परिभाषित कस्टम निर्देशों को समझता है। सबसे पहले कस्टम निर्देश का नाम 'ng' अक्षरों से शुरू होना चाहिए। दूसरे, हाइफ़न प्रतीक '-' का उल्लेख केवल निर्देश को कॉल करते समय ही किया जाना चाहिए। और तीसरा, निर्देश को परिभाषित करते समय अक्षर 'ng' के बाद पहला अक्षर लोअर या अपरकेस हो सकता है।
  3. हम टेम्पलेट पैरामीटर का उपयोग कर रहे हैं जो कस्टम निर्देशों के लिए Angular द्वारा परिभाषित एक पैरामीटर है। इसमें, हम परिभाषित कर रहे हैं कि जब भी इस निर्देश का उपयोग किया जाता है, तो बस टेम्पलेट के मान का उपयोग करें और इसे कॉलिंग कोड में इंजेक्ट करें।
  4. यहाँ हम अब अपने कस्टम निर्मित “ng-guru” निर्देश का उपयोग कर रहे हैं। जब हम ऐसा करते हैं, तो हमारे टेम्पलेट के लिए परिभाषित मूल्य “ एंगुलर जेएस ट्यूटोरियल ” अब यहां इंजेक्ट किया जाएगा।

यदि कोड सफलतापूर्वक निष्पादित हो जाता है, तो जब आप अपना कोड ब्राउज़र में चलाएंगे तो निम्नलिखित आउटपुट दिखाया जाएगा।

आउटपुट:

कस्टम निर्देश बनाएँ

उपरोक्त आउटपुट स्पष्ट रूप से दर्शाता है कि हमारा कस्टम ng-guru डायरेक्टिव, जिसमें कस्टम टेक्स्ट दिखाने के लिए टेम्पलेट परिभाषित है, ब्राउज़र में प्रदर्शित होता है।

AngularJs निर्देश और कार्यक्षेत्र

स्कोप को उस गोंद के रूप में परिभाषित किया जाता है जो दृश्य और नियंत्रक के बीच डेटा का प्रबंधन करके नियंत्रक को दृश्य से बांधता है।

कस्टम AngularJs निर्देश बनाते समय, उन्हें डिफ़ॉल्ट रूप से पैरेंट कंट्रोलर में स्कोप ऑब्जेक्ट तक पहुंच प्राप्त होगी।

इस तरह, कस्टम डायरेक्टिव के लिए मुख्य नियंत्रक को भेजे जा रहे डेटा का उपयोग करना आसान हो जाता है।

आइए एक AngularJS कस्टम डायरेक्टिव उदाहरण देखें कि हम अपने कस्टम डायरेक्टिव में पैरेंट कंट्रोलर के दायरे का उपयोग कैसे कर सकते हैं।

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
    <div ng-guru=""></div>

</div>

<script type="text/javascript">

    var app = angular.module('DemoApp',[]);

    app.controller('DemoController',function($scope) {
        $scope.tutorialName = "Angular JS";

    });

        app.directive('ngGuru',function(){
        return {
         template: '<div>{{tutorialName}}</div>'
     }
    });

</script>

</body>
</html>

AngularJs निर्देश और कार्यक्षेत्र

कोड स्पष्टीकरण

  1. हम सबसे पहले “DemoController” नाम का एक कंट्रोलर बनाते हैं। इसमें हम tutorialName नाम का एक वेरिएबल परिभाषित करते हैं और इसे एक स्टेटमेंट में स्कोप ऑब्जेक्ट से जोड़ते हैं – $scope.tutorialName = “AngularJS”।
  2. हमारे कस्टम डायरेक्टिव में, हम एक्सप्रेशन का उपयोग करके वेरिएबल “tutorialName” को कॉल कर सकते हैं। यह वेरिएबल एक्सेसिबल होगा क्योंकि इसे कंट्रोलर “DemoController” में परिभाषित किया गया है, जो इस डायरेक्टिव के लिए पैरेंट बन जाएगा।
  3. हम कंट्रोलर को div टैग में संदर्भित करते हैं, जो हमारे पैरेंट div टैग के रूप में कार्य करेगा। ध्यान दें कि हमारे कस्टम डायरेक्टिव को tutorialName वैरिएबल तक पहुँचने के लिए पहले यह करना होगा।
  4. अंत में हम अपने कस्टम डायरेक्टिव “ng-guru” को अपने div टैग से जोड़ते हैं।

यदि कोड सफलतापूर्वक निष्पादित हो जाता है, तो जब आप अपना कोड ब्राउज़र में चलाएंगे तो निम्नलिखित आउटपुट दिखाया जाएगा।

आउटपुट:

AngularJs निर्देश और कार्यक्षेत्र

उपरोक्त आउटपुट स्पष्ट रूप से दिखाता है कि हमारा कस्टम डायरेक्टिव “ng-guru” पैरेंट कंट्रोलर में स्कोप वेरिएबल tutorialName का उपयोग करता है।

निर्देशों के साथ नियंत्रकों का उपयोग करना

एंगुलर यह सुविधा देता है कस्टम निर्देशों से सीधे नियंत्रक के सदस्य चर तक पहुंचें स्कोप ऑब्जेक्ट की आवश्यकता के बिना.

यह कभी-कभी आवश्यक हो जाता है क्योंकि किसी अनुप्रयोग में आपके पास एकाधिक नियंत्रकों से संबंधित एकाधिक स्कोप ऑब्जेक्ट हो सकते हैं।

इसलिए इस बात की बहुत अधिक संभावना है कि आप गलत नियंत्रक के स्कोप ऑब्जेक्ट तक पहुंचने की गलती कर सकते हैं।

ऐसे परिदृश्य में मेरे निर्देश से "मैं इस विशिष्ट नियंत्रक तक पहुंचना चाहता हूं" कहने का विशेष रूप से उल्लेख करने का एक तरीका है।

आइये एक उदाहरण देखें कि हम इसे कैसे प्राप्त कर सकते हैं।

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
    <div ng-guru99=""></div>

</div>

<script type="text/javascript">

    var app = angular.module('DemoApp',[]);

    app.controller('DemoController',function() {
        this.tutorialName = "Angular";

    });

     app.directive('ngGuru99',function(){
        return {
         controller: 'DemoController',

          controllerAs: 'ctrl',

          template: '{{ctrl.tutorialName}}'
     };
    });

</script>

</body>
</html>

निर्देशों के साथ नियंत्रकों का उपयोग करना

कोड स्पष्टीकरण

  1. हम सबसे पहले "डेमोकंट्रोलर" नामक एक कंट्रोलर बनाते हैं। इसमें हम "ट्यूटोरियलनेम" नामक एक वेरिएबल परिभाषित करेंगे और इस बार इसे स्कोप ऑब्जेक्ट से जोड़ने के बजाय, हम इसे सीधे कंट्रोलर से जोड़ेंगे।
  2. हमारे कस्टम निर्देश में, हम विशेष रूप से उल्लेख कर रहे हैं कि हम नियंत्रक पैरामीटर कीवर्ड का उपयोग करके नियंत्रक "डेमोकंट्रोलर" का उपयोग करना चाहते हैं।
  3. हम “controllerAs” पैरामीटर का उपयोग करके कंट्रोलर के लिए एक संदर्भ बनाते हैं। इसे Angular द्वारा परिभाषित किया गया है और यह कंट्रोलर को संदर्भ के रूप में संदर्भित करने का तरीका है।
  4. ध्यान दें: -नियंत्रक, नियंत्रकएएस और टेम्पलेट स्टेटमेंट के संबंधित ब्लॉकों को निर्दिष्ट करके एक निर्देश में एकाधिक नियंत्रकों तक पहुंचना संभव है।

  5. अंत में, हमारे टेम्पलेट में, हम चरण 3 में बनाए गए संदर्भ का उपयोग कर रहे हैं और चरण 1 में नियंत्रक से सीधे जुड़े सदस्य चर का उपयोग कर रहे हैं।

यदि कोड सफलतापूर्वक निष्पादित हो जाता है, तो जब आप अपना कोड ब्राउज़र में चलाएंगे तो निम्नलिखित आउटपुट दिखाया जाएगा।

आउटपुट:

निर्देशों के साथ नियंत्रकों का उपयोग करना

आउटपुट स्पष्ट रूप से दिखाता है कि कस्टम डायरेक्टिव विशेष रूप से DemoController और उससे जुड़े सदस्य चर tutorialName तक पहुंच रहा है और "Angular" टेक्स्ट प्रदर्शित करता है।

पुन: प्रयोज्य निर्देश कैसे बनाएं

हमने पहले ही कस्टम निर्देशों की शक्ति देखी है, लेकिन हम अपने स्वयं के पुनः प्रयोज्य निर्देशों का निर्माण करके इसे अगले स्तर तक ले जा सकते हैं।

उदाहरण के लिए, मान लीजिए कि हम ऐसा कोड डालना चाहते हैं जो हमेशा नीचे दिए गए HTML टैग्स को कई स्क्रीन पर दिखाएगा, जो मूल रूप से उपयोगकर्ता के "नाम" और "आयु" के लिए एक इनपुट है।

हर बार कोडिंग किए बिना कई स्क्रीन पर इस फ़ंक्शन का पुन: उपयोग करने के लिए, हम इन नियंत्रणों (उपयोगकर्ता का "नाम" और "आयु") को रखने के लिए कोणीय में एक मास्टर नियंत्रण या निर्देश बनाते हैं।

तो अब, हर बार नीचे दी गई स्क्रीन के लिए एक ही कोड दर्ज करने के बजाय, हम वास्तव में इस कोड को एक निर्देश में एम्बेड कर सकते हैं और किसी भी समय उस निर्देश को एम्बेड कर सकते हैं।

आइये एक उदाहरण देखें कि हम इसे कैसे प्राप्त कर सकते हैं।

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp">
    <div ng-guru=""></div>

</div>

<script type="text/javascript">

    var app = angular.module('DemoApp',[]);

    app.directive('ngGuru',function(){
        return {

            template: '&nbsp;&nbsp;Name <input type="text"><br><br>&nbsp;&nbsp;&nbsp;Age<input type="text">'
        };
    });

</script>

</body>
</html>

पुन: प्रयोज्य निर्देश बनाएं

पुन: प्रयोज्य निर्देश बनाएं

कोड स्पष्टीकरण

  • कस्टम डायरेक्टिव के लिए हमारे कोड स्निपेट में, जो बदलता है वह सिर्फ वह मान है जो हमारे कस्टम डायरेक्टिव के टेम्पलेट पैरामीटर को दिया जाता है। प्लान फाइव टैग या टेक्स्ट के बजाय, हम वास्तव में "नाम" और "आयु" के लिए 2 इनपुट नियंत्रणों के पूरे टुकड़े को दर्ज कर रहे हैं, जिन्हें हमारे पृष्ठ पर दिखाया जाना चाहिए।

यदि कोड सफलतापूर्वक निष्पादित हो जाता है, तो जब आप अपना कोड ब्राउज़र में चलाएंगे तो निम्नलिखित आउटपुट दिखाया जाएगा।

आउटपुट:

पुन: प्रयोज्य निर्देश बनाएं

उपरोक्त आउटपुट से, हम देख सकते हैं कि कस्टम डायरेक्टिव के टेम्पलेट से कोड स्निपेट पेज में जुड़ गया है।

AngularJS निर्देश और घटक – ng-transclude

जैसा कि हमने पहले ही बताया, Angular का उद्देश्य कार्यक्षमता का विस्तार करना है एचटीएमएलऔर हम पहले ही देख चुके हैं कि कैसे हम कस्टम पुनः प्रयोज्य निर्देशों का उपयोग करके कोड इंजेक्शन प्राप्त कर सकते हैं।

लेकिन आधुनिक वेब एप्लिकेशन विकास में, वेब घटकों को विकसित करने की अवधारणा भी है। जिसका मूल रूप से मतलब है अपने स्वयं के HTML टैग बनाना जिन्हें हमारे कोड में घटकों के रूप में इस्तेमाल किया जा सकता है।

इसलिए एंगुलर HTML टैग्स में विशेषताओं को इंजेक्ट करने की क्षमता देकर HTML टैग्स को विस्तारित करने के लिए एक और स्तर की शक्ति प्रदान करता है।

यह कार्य “एनजी-ट्रांसक्लूड” टैग, जो एक प्रकार की सेटिंग है जो एंगुलर को मार्कअप में निर्देश के अंदर डाली गई हर चीज को कैप्चर करने के लिए कहती है।

आइये एक उदाहरण लेते हैं कि हम इसे कैसे प्राप्त कर सकते हैं।

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp">
    <pane title="{{title}}">Angular JS</pane>

</div>

<script type="text/javascript">

    var app = angular.module('DemoApp',[]);

    app.directive('pane',function(){
        return {

            transclude:true,
            scope :{title:'@'},
            template: '<div style="border: 1px solid black;"> '+
                        '<ng-transclude></ng-transclude>'+
                            '</div>'
        };
    });

</script>

</body>
</html>

AngularJS निर्देश और घटक

कोड स्पष्टीकरण

  1. हम 'pane' नामक कस्टम HTML टैग को परिभाषित करने के लिए निर्देश का उपयोग कर रहे हैं और एक फ़ंक्शन जोड़ रहे हैं जो इस टैग के लिए कुछ कस्टम कोड डालेगा। आउटपुट में, हमारा कस्टम pane टैग एक ठोस काले बॉर्डर के साथ एक आयत में “AngularJS” टेक्स्ट प्रदर्शित करने जा रहा है।
  2. "ट्रांसक्लूड" विशेषता को सत्य के रूप में उल्लेखित किया जाना चाहिए, जो कि इस टैग को हमारे DOM में इंजेक्ट करने के लिए एंगुलर द्वारा आवश्यक है।
  3. स्कोप में, हम एक शीर्षक विशेषता परिभाषित कर रहे हैं। विशेषताओं को आम तौर पर नाम/मूल्य जोड़े के रूप में परिभाषित किया जाता है जैसे: नाम = "मूल्य"। हमारे मामले में, हमारे पैन HTML टैग में विशेषता का नाम "शीर्षक" है। "@" प्रतीक कोणीय से आवश्यकता है। ऐसा इसलिए किया जाता है ताकि जब चरण 5 में शीर्षक = {{शीर्षक}} पंक्ति निष्पादित की जाती है, तो शीर्षक विशेषता के लिए कस्टम कोड पैन HTML टैग में जुड़ जाता है।
  4. शीर्षक विशेषताओं के लिए कस्टम कोड जो हमारे नियंत्रण के लिए एक ठोस काली सीमा खींचता है।
  5. अंत में, हम अपने कस्टम HTML टैग को परिभाषित किए गए शीर्षक विशेषता के साथ कॉल कर रहे हैं।

यदि कोड सफलतापूर्वक निष्पादित हो जाता है, तो जब आप अपना कोड ब्राउज़र में चलाएंगे तो निम्नलिखित आउटपुट दिखाया जाएगा।

आउटपुट:

AngularJS निर्देश और घटक

  • आउटपुट स्पष्ट रूप से दिखाता है कि pane html5 टैग की title विशेषता को “Angular.JS” के कस्टम मान पर सेट किया गया है।

नेस्टेड निर्देश

AngularJS में डायरेक्टिव्स को नेस्ट किया जा सकता है। जैसे किसी भी मॉड्यूल या फ़ंक्शन में इनर मॉड्यूल या फ़ंक्शन प्रोग्रामिंग भाषा, आपको निर्देशों को एक दूसरे के भीतर एम्बेड करने की आवश्यकता हो सकती है।

नीचे दिए गए उदाहरण को देखकर आप इसे बेहतर ढंग से समझ सकते हैं।

इस उदाहरण में, हम “बाहरी” और “आंतरिक” नामक 2 निर्देश बना रहे हैं।

  • इनर डायरेक्टिव "इनर" नामक पाठ प्रदर्शित करता है।
  • जबकि आउटर डायरेक्टिव वास्तव में "इनर" नामक पाठ को प्रदर्शित करने के लिए इनर डायरेक्टिव को कॉल करता है।
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp">
    <outer></outer>
</div>

<script type="text/javascript">

    var app = angular.module('DemoApp',[]);

    app.directive('outer',function(){
        return {

            restrict:'E',
            template: '<div><h1>Outer</h1><inner></inner></div>',
        }});

    app.directive('inner',function(){
        return {

            restrict:'E',
            template: '<div><h1>Inner</h1></div>',
        }
    });
</script>

</body>
</html>

नेस्टेड निर्देश

कोड स्पष्टीकरण

  1. हम “आउटर” नामक एक डायरेक्टिव बना रहे हैं जो हमारे पैरेंट डायरेक्टिव की तरह व्यवहार करेगा। यह डायरेक्टिव फिर “इनर” डायरेक्टिव को कॉल करेगा।
  2. प्रतिबंधित: 'ई' एंगुलर द्वारा यह सुनिश्चित करने के लिए आवश्यक है कि आंतरिक निर्देश से डेटा बाहरी निर्देश के लिए उपलब्ध है। अक्षर 'ई' शब्द 'एलिमेंट' का संक्षिप्त रूप है।
  3. यहां हम inner डायरेक्टिव बना रहे हैं जो div टैग में “Inner” टेक्स्ट प्रदर्शित करता है।
  4. आउटर डायरेक्टिव (चरण #4) के लिए टेम्पलेट में, हम इनर डायरेक्टिव को कॉल कर रहे हैं। तो यहाँ हम इनर डायरेक्टिव से आउटर डायरेक्टिव में टेम्पलेट को इंजेक्ट कर रहे हैं।
  5. अंततः, हम सीधे बाहरी निर्देश का आह्वान कर रहे हैं।

यदि कोड सफलतापूर्वक निष्पादित हो जाता है, तो जब आप अपना कोड ब्राउज़र में चलाएंगे तो निम्नलिखित आउटपुट दिखाया जाएगा।

आउटपुट:

नेस्टेड निर्देश

आउटपुट से,

  • यह देखा जा सकता है कि बाहरी और आंतरिक दोनों निर्देशों को बुलाया गया है, और दोनों div टैग में पाठ प्रदर्शित किया गया है।

निर्देश में घटनाओं को संभालना

कार्यक्रम ऐसे माउस क्लिक या बटन क्लिक को डायरेक्टिव के भीतर से ही नियंत्रित किया जा सकता है। यह लिंक फ़ंक्शन का उपयोग करके किया जाता है। लिंक फ़ंक्शन वह है जो डायरेक्टिव को HTML पेज में DOM तत्वों से खुद को जोड़ने की अनुमति देता है।

सिंटेक्स:

लिंक तत्व का सिंटैक्स नीचे दिखाया गया है

एनजी-दोहराने

link: function ($scope, element, attrs)

लिंक फ़ंक्शन सामान्यतः 3 पैरामीटर स्वीकार करता है जिसमें स्कोप, वह तत्व जिसके साथ निर्देश जुड़ा हुआ है, तथा लक्ष्य तत्व की विशेषताएं शामिल हैं।

आइये एक उदाहरण देखें कि हम यह कैसे कर सकते हैं।

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp">
    <div ng-guru="">Click Me</div>
</div>

<script type="text/javascript">

    var app = angular.module('DemoApp',[]);

    app.directive('ngGuru',function(){
        return {

            link:function($scope,element,attrs) {
                element.bind('click',function () {
                    element.html('You clicked me');
                });}
        }});
</script>

</body>
</html>

निर्देश में घटनाओं को संभालना

कोड स्पष्टीकरण

  1. हम HTML DOM में घटनाओं तक पहुंचने के लिए निर्देशों की क्षमता देने के लिए एंगुलर में परिभाषित लिंक फ़ंक्शन का उपयोग कर रहे हैं।
  2. हम 'एलिमेंट' कीवर्ड का उपयोग कर रहे हैं क्योंकि हम HTML DOM एलिमेंट के लिए किसी इवेंट का जवाब देना चाहते हैं, जो हमारे मामले में "div" एलिमेंट होगा। फिर हम "बाइंड" फ़ंक्शन का उपयोग कर रहे हैं और कह रहे हैं कि हम एलिमेंट के क्लिक इवेंट में कस्टम कार्यक्षमता जोड़ना चाहते हैं। 'क्लिक' शब्द कीवर्ड है, जिसका उपयोग किसी भी HTML कंट्रोल के क्लिक इवेंट को दर्शाने के लिए किया जाता है। उदाहरण के लिए, HTML बटन कंट्रोल में क्लिक इवेंट होता है। चूँकि, हमारे उदाहरण में, हम अपने "dev" टैग के क्लिक इवेंट में एक कस्टम कोड जोड़ना चाहते हैं, इसलिए हम 'क्लिक' कीवर्ड का उपयोग करते हैं।
  3. यहां हम कह रहे हैं कि हम तत्व (हमारे मामले में div तत्व) के आंतरिक HTML को 'You clicked me!' पाठ से प्रतिस्थापित करना चाहते हैं।
  4. यहां हम ng-guru कस्टम निर्देश का उपयोग करने के लिए अपने div टैग को परिभाषित कर रहे हैं।

यदि कोड सफलतापूर्वक निष्पादित हो जाता है, तो जब आप अपना कोड ब्राउज़र में चलाएंगे तो निम्नलिखित आउटपुट दिखाया जाएगा।

आउटपुट:

निर्देश में घटनाओं को संभालना

  • शुरुआत में यूजर को 'क्लिक मी' टेक्स्ट दिखाया जाएगा क्योंकि यह वही है जो शुरू में div टैग में परिभाषित किया गया है। जब आप वास्तव में div टैग पर क्लिक करेंगे, तो नीचे दिया गया आउटपुट दिखाया जाएगा

निर्देश में घटनाओं को संभालना

सारांश

  • कोई भी कस्टम डायरेक्टिव बना सकता है जिसका उपयोग मुख्य कोणीय अनुप्रयोग में कोड इंजेक्ट करने के लिए किया जा सकता है।
  • 'कंट्रोलर', 'कंट्रोलरएएस' और 'टेम्पलेट' कीवर्ड का उपयोग करके किसी निश्चित नियंत्रक में स्कोप ऑब्जेक्ट में परिभाषित सदस्यों को कॉल करने के लिए कस्टम निर्देश बनाए जा सकते हैं।
  • निर्देशों को एम्बेडेड कार्यक्षमता प्रदान करने के लिए भी नेस्ट किया जा सकता है, जो अनुप्रयोग की आवश्यकता के आधार पर आवश्यक हो सकता है।
  • निर्देशों को पुनः-प्रयोज्य भी बनाया जा सकता है, ताकि उनका उपयोग सामान्य कोड को सम्मिलित करने के लिए किया जा सके, जिसकी आवश्यकता विभिन्न वेब अनुप्रयोगों में हो सकती है।
  • निर्देशों का उपयोग कस्टम HTML टैग बनाने के लिए भी किया जा सकता है, जिनकी व्यावसायिक आवश्यकता के अनुसार अपनी स्वयं की कार्यक्षमता परिभाषित होगी।
  • बटन और माउस क्लिक जैसे DOM इवेंट को संभालने के लिए इवेंट को निर्देशों के भीतर से भी प्रबंधित किया जा सकता है।