AngularJS निर्देश में परिभाषित विधि को कैसे कॉल करें?

Question

मेरे पास एक निर्देश है, यहाँ कोड है:

.directive('map', function() {
    return {
        restrict: 'E',
        replace: true,
        template: '<div></div>',
        link: function($scope, element, attrs) {

            var center = new google.maps.LatLng(50.1, 14.4); 
            $scope.map_options = {
                zoom: 14,
                center: center,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            // create map
            var map = new google.maps.Map(document.getElementById(attrs.id), $scope.map_options);
            var dirService= new google.maps.DirectionsService();
            var dirRenderer= new google.maps.DirectionsRenderer()

            var showDirections = function(dirResult, dirStatus) {
                if (dirStatus != google.maps.DirectionsStatus.OK) {
                    alert('Directions failed: ' + dirStatus);
                    return;
                  }
                  // Show directions
                dirRenderer.setMap(map);
                //$scope.dirRenderer.setPanel(Demo.dirContainer);
                dirRenderer.setDirections(dirResult);
            };

            // Watch
            var updateMap = function(){
                dirService.route($scope.dirRequest, showDirections); 
            };    
            $scope.$watch('dirRequest.origin', updateMap);

            google.maps.event.addListener(map, 'zoom_changed', function() {
                $scope.map_options.zoom = map.getZoom();
              });

            dirService.route($scope.dirRequest, showDirections);  
        }
    }
})

मैं updateMap()एक उपयोगकर्ता कार्रवाई पर कॉल करना चाहूंगा । कार्रवाई बटन निर्देश पर नहीं है।

updateMap()कंट्रोलर से कॉल करने का सबसे अच्छा तरीका क्या है ?

Comments

छोटा साइड नोट: कन्वेंशन एक लिंक फंक्शन में 'स्कोप' के लिए डॉलर साइन का उपयोग नहीं करना है, क्योंकि स्कोप इंजेक्ट नहीं है, लेकिन एक नियमित तर्क के रूप में पारित किया गया है।

— नोम

Answer 1

यदि आप अलग-अलग स्कोप का उपयोग करना चाहते हैं, तो आप =नियंत्रक दायरे से एक चर के द्वि-दिशात्मक बंधन का उपयोग करके एक नियंत्रण ऑब्जेक्ट पास कर सकते हैं । आप एक ही नियंत्रण ऑब्जेक्ट के साथ एक पृष्ठ पर एक ही निर्देश के कई उदाहरणों को भी नियंत्रित कर सकते हैं।

angular.module('directiveControlDemo', [])

.controller('MainCtrl', function($scope) {
  $scope.focusinControl = {};
})

.directive('focusin', function factory() {
  return {
    restrict: 'E',
    replace: true,
    template: '<div>A:{{internalControl}}</div>',
    scope: {
      control: '='
    },
    link: function(scope, element, attrs) {
      scope.internalControl = scope.control || {};
      scope.internalControl.takenTablets = 0;
      scope.internalControl.takeTablet = function() {
        scope.internalControl.takenTablets += 1;
      }
    }
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="directiveControlDemo">
  <div ng-controller="MainCtrl">
    <button ng-click="focusinControl.takeTablet()">Call directive function</button>
    <p>
      <b>In controller scope:</b>
      {{focusinControl}}
    </p>
    <p>
      <b>In directive scope:</b>
      <focusin control="focusinControl"></focusin>
    </p>
    <p>
      <b>Without control object:</b>
      <focusin></focusin>
    </p>
  </div>
</div>

Comments

+1 यह भी है कि मैं कोणीय में अपने पुन: प्रयोज्य घटकों के लिए एपीआई कैसे बनाऊं।

— रोमि

यह स्वीकृत उत्तर की तुलना में क्लीनर है, और simpsons संदर्भ के लिए +1, अगर मैं गलत नहीं हूँ

— ब्लेक मिलर

यह है कि मैं एक ही समस्या को कैसे हल किया है। यह काम करता है, लेकिन यह एक हैक की तरह दिखता है ... काश कोणीय इसके लिए बेहतर समाधान होता।

— डेमा

मैं कोणीय सीख रहा हूं, इसलिए मेरी राय में अधिक भार नहीं हो सकता है, लेकिन मैंने इस दृष्टिकोण को अन्य उत्तर की तुलना में अधिक सहज पाया और इसे सही उत्तर के रूप में चिह्नित किया। मैंने इसे अपने सैंडबॉक्स एप्लिकेशन में शून्य परेशानी के साथ लागू किया।

— BLSully

आपको शायद यह सुनिश्चित करने के लिए एक चेक करना चाहिए कि scope.controlमौजूद नहीं है, अन्यथा अन्य स्थान जो निर्देश का उपयोग करते हैं, लेकिन निर्देश के तरीकों तक पहुंचने की आवश्यकता नहीं है और एक controlattr नहीं है त्रुटियों को फेंकना शुरू कर देंगे, जो विशेषताओं को सेट करने में सक्षम नहीं हैंundefined

— CheapSteaks

Answer 2

यह मानते हुए कि कार्रवाई बटन $scopeनिर्देश के रूप में एक ही नियंत्रक का उपयोग करता है , बस लिंक फ़ंक्शन के अंदर फ़ंक्शन updateMapको परिभाषित $scopeकरें। आपका नियंत्रक तब उस फ़ंक्शन को कॉल कर सकता है जब कार्रवाई बटन पर क्लिक किया जाता है।

<div ng-controller="MyCtrl">
    <map></map>
    <button ng-click="updateMap()">call updateMap()</button>
</div>

app.directive('map', function() {
    return {
        restrict: 'E',
        replace: true,
        template: '<div></div>',
        link: function($scope, element, attrs) {
            $scope.updateMap = function() {
                alert('inside updateMap()');
            }
        }
    }
});

fiddle

---

@ फ्लोरियनएफ की टिप्पणी के अनुसार, यदि निर्देश एक अलग दायरे का उपयोग करता है, तो चीजें अधिक जटिल होती हैं। यह काम करने का एक तरीका है: निर्देश में एक set-fnविशेषता जोड़ें mapजो नियंत्रक के साथ निर्देशन कार्य को पंजीकृत करेगा:

<map set-fn="setDirectiveFn(theDirFn)"></map>
<button ng-click="directiveFn()">call directive function</button>

scope: { setFn: '&' },
link: function(scope, element, attrs) {
    scope.updateMap = function() {
       alert('inside updateMap()');
    }
    scope.setFn({theDirFn: scope.updateMap});
}

function MyCtrl($scope) {
    $scope.setDirectiveFn = function(directiveFn) {
        $scope.directiveFn = directiveFn;
    };
}

fiddle

Comments

क्या होगा अगर निर्देश में एक अलग गुंजाइश है?

— फ्लोरियन एफ

धन्यवाद! (शायद निर्देशक के नियंत्रक में परिभाषित फ़ंक्शन को कॉल करना आसान होगा लेकिन मुझे इस बारे में निश्चित नहीं है)

— फ्लोरियन एफ

यह बहुत बेहतर तरीका है यदि आप एक अलग दायरे के साथ काम नहीं कर रहे हैं।

— मार्टिन फ्रैंक

यह उत्तर वास्तव में ओपी प्रश्न का उत्तर देता है। यह अलग-अलग स्कोप का भी उपयोग करता है, एक अलग स्कोप होने के लिए आपको केवल scopeसंपत्ति को निर्देशात्मक घोषणा में जोड़ना होगा ।

— डैनियल जी।

Answer 3

हालाँकि यह एक निर्देश के पृथक दायरे पर किसी वस्तु को उजागर करने के लिए लुभावना हो सकता है, इसके साथ संचार करने की सुविधा के लिए, ऐसा करने से "स्पेगेटी" कोड को भ्रमित किया जा सकता है, खासकर यदि आपको कुछ स्तरों के माध्यम से इस संचार को चेन करने की आवश्यकता होती है (नियंत्रक को निर्देश देने के लिए, नेस्टेड निर्देश, आदि)

हम मूल रूप से इस रास्ते पर चले गए, लेकिन कुछ और शोधों के बाद पाया गया कि इसने और अधिक समझ बनाई और घटनाओं और संपत्तियों को उजागर करने के लिए दोनों अधिक बनाए रखने योग्य और पठनीय कोड का परिणाम हुआ जो कि एक निर्देश सेवा के माध्यम से संचार के लिए उपयोग करेगा और फिर उस सेवा के गुणों पर $ घड़ी का उपयोग करेगा। निर्देश या कोई अन्य नियंत्रण जिन्हें संचार के लिए उन परिवर्तनों पर प्रतिक्रिया करने की आवश्यकता होगी।

यह अमूर्त AngularJS की निर्भरता इंजेक्शन ढांचे के साथ बहुत अच्छी तरह से काम करता है क्योंकि आप सेवा को किसी भी आइटम में इंजेक्ट कर सकते हैं जिन्हें उन घटनाओं पर प्रतिक्रिया करने की आवश्यकता होती है। यदि आप Angular.js फ़ाइल को देखते हैं, तो आप देखेंगे कि वहां के निदेशक भी इस तरह से सेवाओं और $ घड़ी का उपयोग करते हैं, वे अलग-अलग दायरे में घटनाओं को उजागर नहीं करते हैं।

अंत में, इस मामले में कि आपको निर्देश के बीच संवाद करने की आवश्यकता है जो एक दूसरे पर निर्भर हैं, मैं उन निर्देशों के बीच नियंत्रक को संचार के साधन के रूप में साझा करने की सलाह दूंगा।

बेस्ट प्रैक्टिस के लिए एंगुलरजेएस के विकी में भी इसका उल्लेख है:

केवल उपयोग। $ ब्रॉडकास्ट (), $ emit () और (पर।) परमाणु घटनाओं के लिए। इवेंट्स जो पूरे ऐप में विश्व स्तर पर प्रासंगिक हैं (जैसे कि उपयोगकर्ता प्रमाणीकरण या ऐप बंद करना)। यदि आप मॉड्यूल, सेवाओं या विजेट के लिए विशिष्ट घटनाओं को चाहते हैं, तो आपको सेवाओं, निर्देशक नियंत्रकों या तृतीय पक्ष Libs पर विचार करना चाहिए

• $ गुंजाइश। $ घड़ी () को घटनाओं की आवश्यकता को प्रतिस्थापित करना चाहिए
• सीधे संचार के लिए सेवाओं और कॉलिंग विधियों को इंजेक्ट करना भी उपयोगी है
• निर्देश सीधे-नियंत्रक के माध्यम से एक दूसरे के साथ सीधे संवाद करने में सक्षम हैं

Comments

मैं सहज रूप से दो समाधानों तक पहुंच गया: (1) एक गुंजाइश चर के परिवर्तन को देखता है =, चर में विधि का नाम और तर्क होते हैं। (2) @विषय आईडी के रूप में एक तरह से बाँध स्ट्रिंग को उजागर करें और इस विषय पर कैली को घटना भेजें। अब मैंने सबसे अच्छा अभ्यास विकी देखा। मुझे लगता है कि ऐसा करने का कोई कारण नहीं है। लेकिन मैं अभी भी बहुत स्पष्ट नहीं हूं कि यह कैसे काम करता है। मेरे मामले में, मैंने एक टैबसेट निर्देशन बनाया, मैं एक switchTab(tabIndex)विधि को उजागर करना चाहता हूं । क्या आप और अधिक उदाहरण दे सकते हैं?

— stanleyxu2005

आप एक switchTab(tabIndex)विधि को उजागर नहीं करेंगे , आप केवल एक tabIndexचर के लिए बाध्य होंगे । आपके पृष्ठ नियंत्रक में ऐसी क्रियाएं हो सकती हैं जो उस चर को बदल दें। आप उस वैरिएबल को अपने टैब डायरेक्टिव में बांधते / पास करते हैं। आपका टैब निर्देश फिर परिवर्तन के लिए उस चर को देख सकता है, और अपने स्वयं के स्विचटैब का प्रदर्शन कर सकता है। क्योंकि निर्देश एक चर के आधार पर अपने टैब को नियंत्रित करने के लिए कब / कैसे तय करता है। यह बाहरी स्रोत का काम नहीं है, अन्यथा बाहरी स्रोतों को निर्देश के आंतरिक कामकाज के ज्ञान की आवश्यकता होती है, जो कि खराब है।

— सुमेरे

Answer 4

ओलिवर के उत्तर पर निर्माण - आपको हमेशा एक निर्देश के आंतरिक तरीकों तक पहुंचने की आवश्यकता नहीं हो सकती है, और उन मामलों में जो आप संभवतः एक खाली वस्तु नहीं बनाना चाहते हैं और controlनिर्देश को केवल एक त्रुटि जोड़ने से रोकने के लिए एक attr जोड़ना चाहते हैं ( cannot set property 'takeTablet' of undefined)।

आप निर्देश के भीतर अन्य स्थानों पर भी विधि का उपयोग करना चाह सकते हैं।

मैं यह सुनिश्चित करने के लिए एक जांच scope.controlजोड़ूंगा कि इसमें मौजूद मॉड्यूल पैटर्न को प्रकट करने के लिए समान तरीके से मौजूद तरीके से सेट करें

app.directive('focusin', function factory() {
  return {
    restrict: 'E',
    replace: true,
    template: '<div>A:{{control}}</div>',
    scope: {
      control: '='
    },
    link : function (scope, element, attrs) {
      var takenTablets = 0;
      var takeTablet = function() {
        takenTablets += 1;  
      }

      if (scope.control) {
        scope.control = {
          takeTablet: takeTablet
        };
      }
    }
  };
});

Comments

मौके पर, निर्देश के अंदर एक खुलासा पैटर्न का उपयोग करने से इरादे दूर हो जाते हैं। अच्छा है!

— JSancho

Answer 5

सच कहूं तो, मैं वास्तव में इस धागे के किसी भी उत्तर के साथ आश्वस्त नहीं था। तो, यहाँ मेरे समाधान हैं:

निर्देशक हैंडलर (प्रबंधक) दृष्टिकोण

यह विधि अज्ञेय है कि क्या निर्देश $scopeएक साझा है या एक अलग है

factoryनिर्देश उदाहरणों को पंजीकृत करने के लिए A

angular.module('myModule').factory('MyDirectiveHandler', function() {
    var instance_map = {};
    var service = {
        registerDirective: registerDirective,
        getDirective: getDirective,
        deregisterDirective: deregisterDirective
    };

    return service;

    function registerDirective(name, ctrl) {
        instance_map[name] = ctrl;
    }

    function getDirective(name) {
        return instance_map[name];
    }

    function deregisterDirective(name) {
        instance_map[name] = null;
    }
});

निर्देश कोड, मैं आमतौर पर सभी तर्क रखता हूं जो DOM के साथ निर्देशक नियंत्रक के साथ व्यवहार नहीं करता है। और हमारे हैंडलर के अंदर कंट्रोलर इंस्टेंस को रजिस्टर करना

angular.module('myModule').directive('myDirective', function(MyDirectiveHandler) {
    var directive = {
        link: link,
        controller: controller
    };

    return directive;

    function link() {
        //link fn code
    }

    function controller($scope, $attrs) {
        var name = $attrs.name;

        this.updateMap = function() {
            //some code
        };

        MyDirectiveHandler.registerDirective(name, this);

        $scope.$on('destroy', function() {
            MyDirectiveHandler.deregisterDirective(name);
        });
    }
})

टेम्पलेट कोड

<div my-directive name="foo"></div>

factoryसार्वजनिक रूप से उजागर विधियों को चलाने और चलाने वाले नियंत्रक उदाहरण तक पहुंचें

angular.module('myModule').controller('MyController', function(MyDirectiveHandler, $scope) {
    $scope.someFn = function() {
        MyDirectiveHandler.get('foo').updateMap();
    };
});

कोणीय का दृष्टिकोण

कोणीय पुस्तक से एक पत्ता निकालते हुए कि वे कैसे व्यवहार करते हैं

<form name="my_form"></form>

गुंजाइश पर $ पार्स और पंजीकरण नियंत्रक का उपयोग करना $parent। यह तकनीक पृथक $scopeनिर्देशों पर काम नहीं करती है ।

angular.module('myModule').directive('myDirective', function($parse) {
    var directive = {
        link: link,
        controller: controller,
        scope: true
    };

    return directive;

    function link() {
        //link fn code
    }

    function controller($scope, $attrs) {
        $parse($attrs.name).assign($scope.$parent, this);

        this.updateMap = function() {
            //some code
        };
    }
})

कंट्रोलर का उपयोग करके इसे एक्सेस करें $scope.foo

angular.module('myModule').controller('MyController', function($scope) {
    $scope.someFn = function() {
        $scope.foo.updateMap();
    };
});

Comments

"कोणीय का दृष्टिकोण" बहुत अच्छा लग रहा है! हालांकि एक टाइपो है: $scope.fooहोना चाहिए$scope.my_form

— डैनियल डी

नहीं, यह तब से होगा $scope.fooजब हमारा खाका है <div my-directive name="foo"></div>और nameविशेषता का मूल्य 'फू' है। <formकोणीय के निर्देशों में से एक का एक उदाहरण है जो इस तकनीक को नियोजित करता है

— मुदस्सिर अली

Answer 6

थोड़ा देर से, लेकिन यह निर्देश में एक फ़ंक्शन को कॉल करने के लिए अलग-अलग गुंजाइश और "घटनाओं" के साथ एक समाधान है। यह समाधान इस SO पोस्ट द्वारा satchmorun से प्रेरित है और एक मॉड्यूल और एक एपीआई जोड़ता है।

//Create module
var MapModule = angular.module('MapModule', []);

//Load dependency dynamically
angular.module('app').requires.push('MapModule');

निर्देश के साथ संवाद करने के लिए एक एपीआई बनाएं। AddUpdateEvent ईवेंट सरणी में एक ईवेंट जोड़ता है और हर ईवेंट फ़ंक्शन को अपडेट करता है।

MapModule.factory('MapApi', function () {
    return {
        events: [],

        addUpdateEvent: function (func) {
            this.events.push(func);
        },

        updateMap: function () {
            this.events.forEach(function (func) {
                func.call();
            });
        }
    }
});

(शायद आपको ईवेंट को निकालने के लिए कार्यक्षमता को जोड़ना होगा।)

निर्देश में MapAPI के लिए एक संदर्भ सेट करें और MapApi.updateMap कहा जाता है जब एक घटना के रूप में $ गुंजाइश जोड़ें।

app.directive('map', function () {
    return {
        restrict: 'E', 
        scope: {}, 
        templateUrl: '....',
        controller: function ($scope, $http, $attrs, MapApi) {

            $scope.api = MapApi;

            $scope.updateMap = function () {
                //Update the map 
            };

            //Add event
            $scope.api.addUpdateEvent($scope.updateMap);

        }
    }
});

"मुख्य" नियंत्रक में MapApi का संदर्भ जोड़ें और मानचित्र को अपडेट करने के लिए MapApi.updateMap () को कॉल करें।

app.controller('mainController', function ($scope, MapApi) {

    $scope.updateMapButtonClick = function() {
        MapApi.updateMap();    
    };
}

Comments

इस प्रस्ताव को वास्तविक दुनिया में थोड़ा और काम करने की आवश्यकता होगी जब आपके पास अपनी एपीआई सेवा के आधार पर एक ही प्रकार के कई निर्देश होंगे। आप निश्चित रूप से ऐसी स्थिति में पहुंचेंगे जहां आपको केवल एक विशिष्ट निर्देश से कार्यों को लक्षित करने और कॉल करने की आवश्यकता है, और उन सभी को नहीं। क्या आप इसके समाधान के साथ अपने उत्तर को बढ़ाना चाहेंगे?

— स्मजल

Answer 7

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

clearfn निर्देश तत्व पर एक विशेषता है जिसमें मूल क्षेत्र एक गुंजाइश संपत्ति पारित कर सकता है जो निर्देश तब एक फ़ंक्शन को सेट कर सकता है जो वांछित व्यवहार को पूरा करता है।

<!DOCTYPE html>
<html ng-app="myapp">
  <head>
    <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <style>
      my-box{
        display:block;
        border:solid 1px #aaa;
        min-width:50px;
        min-height:50px;
        padding:.5em;
        margin:1em;
        outline:0px;
        box-shadow:inset 0px 0px .4em #aaa;
      }
    </style>
  </head>
  <body ng-controller="mycontroller">
    <h1>Call method on directive</h1>
    <button ng-click="clear()">Clear</button>
    <my-box clearfn="clear" contentEditable=true></my-box>
    <script>
      var app = angular.module('myapp', []);
      app.controller('mycontroller', function($scope){
      });
      app.directive('myBox', function(){
        return {
          restrict: 'E',
          scope: {
            clearFn: '=clearfn'
          },
          template: '',
          link: function(scope, element, attrs){
            element.html('Hello World!');
            scope.clearFn = function(){
              element.html('');
            };
          }
        }
      });
    </script>
  </body>
</html>

Comments

मुझे समझ में नहीं आता कि यह क्यों काम करता है .. क्या यह स्पष्ट है क्योंकि स्पष्ट विशेषता कुछ के दायरे में है?

— क्विन विल्सन

जैसे ही आप इसे घोषित करते हैं (जैसे scope: { clearFn: '=clearfn' }) यह निर्देश के दायरे का एक हिस्सा बन जाता है ।

— ट्रेवर

Answer 8

बस कार्यक्षेत्र का उपयोग करें। $ पैरेंट को फंक्शन को एसोसिएट करने के लिए कहा जाता है

angular.module('myApp', [])
.controller('MyCtrl',['$scope',function($scope) {

}])
.directive('mydirective',function(){
 function link(scope, el, attr){
   //use scope.$parent to associate the function called to directive function
   scope.$parent.myfunction = function directivefunction(parameter){
     //do something
}
}
return {
        link: link,
        restrict: 'E'   
      };
});

HTML में

<div ng-controller="MyCtrl">
    <mydirective></mydirective>
    <button ng-click="myfunction(parameter)">call()</button>
</div>

Answer 9

आप निर्देशन करने के लिए विधि का नाम बता सकते हैं जिसे आप नियंत्रक से कॉल करना चाहते हैं लेकिन अलग-अलग दायरे के बिना,

angular.module("app", [])
  .directive("palyer", [
    function() {
      return {
        restrict: "A",
        template:'<div class="player"><span ng-bind="text"></span></div>',
        link: function($scope, element, attr) {
          if (attr.toPlay) {
            $scope[attr.toPlay] = function(name) {
              $scope.text = name + " playing...";
            }
          }
        }
      };
    }
  ])
  .controller("playerController", ["$scope",
    function($scope) {
      $scope.clickPlay = function() {
        $scope.play('AR Song');
      };
    }
  ]);

.player{
  border:1px solid;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="playerController">
    <p>Click play button to play
      <p>
        <p palyer="" to-play="play"></p>
        <button ng-click="clickPlay()">Play</button>

  </div>
</div>

Answer 10

TESTED होप यह किसी की मदद करता है।

मेरा सरल दृष्टिकोण (अपने मूल कोड के रूप में टैग सोचो)

<html>
<div ng-click="myfuncion"> 
<my-dir callfunction="myfunction">
</html>

<directive "my-dir">
callfunction:"=callfunction"
link : function(scope,element,attr) {
scope.callfunction = function() {
 /// your code
}
}
</directive>

Answer 11

शायद यह सबसे अच्छा विकल्प नहीं है, लेकिन आप अपने निर्देश के दायरे और / या नियंत्रक का उपयोग angular.element("#element").isolateScope()या कर सकते हैं $("#element").isolateScope()।

Answer 12

पृष्ठ नियंत्रक में एक निर्देशक का नियंत्रक कैसे प्राप्त करें:

1. DOM तत्व से निर्देश नियंत्रक का संदर्भ प्राप्त करने के लिए एक कस्टम निर्देश लिखें:

   angular.module('myApp')
       .directive('controller', controller);
   
   controller.$inject = ['$parse'];
   
   function controller($parse) {
       var directive = {
           restrict: 'A',
           link: linkFunction
       };
       return directive;
   
       function linkFunction(scope, el, attrs) {
           var directiveName = attrs.$normalize(el.prop("tagName").toLowerCase());
           var directiveController = el.controller(directiveName);
   
           var model = $parse(attrs.controller);
           model.assign(scope, directiveController);
       }
   }

2. पेज कंट्रोलर के html में इसका उपयोग करें:

   <my-directive controller="vm.myDirectiveController"></my-directive>

3. पृष्ठ नियंत्रक में निर्देश नियंत्रक का उपयोग करें:

   vm.myDirectiveController.callSomeMethod();

नोट: दिया गया समाधान केवल तत्व निर्देशकों के नियंत्रकों के लिए काम करता है (टैग नाम का उपयोग वांछित निर्देश के नाम को प्राप्त करने के लिए किया जाता है)।

Answer 13

नीचे दिए गए समाधान तब उपयोगी होंगे, जब आप 'कंट्रोलर अस' फॉर्मेट में कंट्रोलर (पैरेंट और डायरेक्टिव (दोनों) अलग-अलग हों)

किसी को यह उपयोगी लग सकता है,

निर्देश:

var directive = {
        link: link,
        restrict: 'E',
        replace: true,
        scope: {
            clearFilters: '='
        },
        templateUrl: "/temp.html",
        bindToController: true, 
        controller: ProjectCustomAttributesController,
        controllerAs: 'vmd'
    };
    return directive;

    function link(scope, element, attrs) {
        scope.vmd.clearFilters = scope.vmd.SetFitlersToDefaultValue;
    }
}

निर्देशक नियंत्रक:

function DirectiveController($location, dbConnection, uiUtility) {
  vmd.SetFitlersToDefaultValue = SetFitlersToDefaultValue;

function SetFitlersToDefaultValue() {
           //your logic
        }
}

HTML कोड :

      <Test-directive clear-filters="vm.ClearFilters"></Test-directive>
    <a class="pull-right" style="cursor: pointer" ng-click="vm.ClearFilters()"><u>Clear</u></a> 
//this button is from parent controller which will call directive controller function