AngularJS - निर्देशन के लिए फ़ंक्शन पास करें

Question

मेरे पास एक उदाहरण है angularJS

<div ng-controller="testCtrl">

<test color1="color1" updateFn="updateFn()"></test>
</div>
 <script>
  angular.module('dr', [])
.controller("testCtrl", function($scope) {
    $scope.color1 = "color";
    $scope.updateFn = function() {
        alert('123');
    }
})
.directive('test', function() {
    return {
        restrict: 'E',
        scope: {color1: '=',
                updateFn: '&'},
        template: "<button ng-click='updateFn()'>Click</button>",
        replace: true,
        link: function(scope, elm, attrs) { 
        }
    }
});

</script>
</body>

</html>

मैं चाहता हूं कि जब मैं बटन पर क्लिक करूं, तो अलर्ट बॉक्स दिखाई देगा, लेकिन कुछ भी नहीं दिखा।

क्या कोई मेरी मदद कर सकता है?

Answer 1

पेरेंट स्कोप में एक कंट्रोलर फंक्शन को एक अलग स्कोप डायरेक्टिव के अंदर से कॉल करने के लिए ओटीपी के dash-separatedअनुसार एचटीएमएल में विशेषता नामों का उपयोग करें ।

यदि आप अपने फ़ंक्शन को एक पैरामीटर भेजना चाहते हैं, तो ऑब्जेक्ट पास करके फ़ंक्शन को कॉल करें:

<test color1="color1" update-fn="updateFn(msg)"></test>

जे एस

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

app.controller("testCtrl", function($scope) {
    $scope.color1 = "color";
    $scope.updateFn = function(msg) {        
        alert(msg);
    }
});

app.directive('test', function() {
    return {
        restrict: 'E',
        scope: {
            color1: '=',
            updateFn: '&'
        },
        // object is passed while making the call
        template: "<button ng-click='updateFn({msg : \"Hello World!\"})'>
            Click</button>",
        replace: true,        
        link: function(scope, elm, attrs) {             
        }
    }
});

Fiddle

Comments

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

— user2707026

इस replaceविशेषता को AngularJS: stackoverflow.com/questions/24194972/…

— cdmckay

किसी कारण से मेरे लिए तर्क अपरिभाषित है।

— चोवी

@chovy मुझे लगता है कि तर्क का उपयोग केवल एक बार किया जाता है जब आप विधि को फिर से कहते हैं? पहले खुले ब्रैकेट के उपयोग से यह प्रतीत होता है कि कोणीय विधि सिर्फ पास होने की विधि के लिए है, लेकिन मैं वहां गलत हो सकता हूं

— markyzm

updateFn({msg: 'my message'});निर्देश के linkफ़ंक्शन के अंदर फ़ंक्शन कॉल करते समय ऑब्जेक्ट मैपिंग का उपयोग उस प्रारूप में किया जाना चाहिए ।

— ब्रायन

Answer 2

शायद मुझे कुछ याद आ रहा है, लेकिन यद्यपि अन्य समाधान अभिभावक कार्यक्षेत्र फ़ंक्शन को कॉल करते हैं, लेकिन निर्देश कोड से तर्क पारित करने की कोई क्षमता नहीं है, इसका कारण यह है कि उदाहरण के लिए, निश्चित मापदंडों के साथ update-fnकॉल updateFn()करना है {msg: "Hello World"}। थोड़ा सा परिवर्तन निर्देश को तर्क पारित करने की अनुमति देता है, जो मुझे लगता है कि कहीं अधिक उपयोगी है।

<test color1="color1" update-fn="updateFn"></test>

ध्यान दें कि HTML एक फ़ंक्शन संदर्भ पास कर रहा है, अर्थात, ()कोष्ठक के बिना ।

जे एस

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

app.controller("testCtrl", function($scope) {
    $scope.color1 = "color";
    $scope.updateFn = function(msg) {        
        alert(msg);
    }
});

app.directive('test', function() {
    return {
        restrict: 'E',
        scope: {
            color1: '=',
            updateFn: '&'
        },
        // object is passed while making the call
        template: "<button ng-click='callUpdate()'>
            Click</button>",
        replace: true,        
        link: function(scope, elm, attrs) {       
          scope.callUpdate = function() {
            scope.updateFn()("Directive Args");
          }
        }
    }
});

इसलिए उपरोक्त में, HTML लोकल स्कोप callUpdateफंक्शन को कॉल कर रहा है , जो तब पैरेंट स्कोप से 'अपडेट' प्राप्त करता है और दिए गए फंक्शन को उन मापदंडों के साथ कॉल करता है जिन्हें डायरेक्शन जनरेट कर सकता है।

http://jsfiddle.net/mygknek2/

Comments

यकीन नहीं है कि मैं कैसे कुछ है कि काम करता है के लिए एक डाउन वोट मिल सकता है ?? यदि आप वोट डालने जा रहे हैं तो आपको एक टिप्पणी छोड़ देनी चाहिए।

— स्टीव

इसने मेरे लिए काम किया। यदि आप अतिरिक्त कार्य नहीं चाहते हैं तो लिखिएng-click="updateFn()('Directive Args')"

— ग्राहम वाल्टर्स

Awwww! गुंजाइश.updateFn () ("डायरेक्टिव आर्ग्स"); !! स्कोप नहीं। ड्यूडेट फ़ाइनल ("डायरेक्टिव आर्ग्स"); !!!

— फुन्ग डी। एक

यह वास्तव में अधिक सही जवाब है !!

— विनेश

@ Ludwik11 सुनिश्चित करें - इसकी वजह है जब गुंजाइश ।updateFn इस तरह से परिभाषित किया गया है जो एक फ़ंक्शन है जो एक फ़ंक्शन देता है (इसलिए () ()) और यह इसलिए है क्योंकि हम गुंजाइश में पास होते हैं (अपडेट-fn = "updateFn" html में) एक संदर्भ में हम चाहते हैं कि समारोह के लिए। 1 () इस संदर्भ को वापस करने के लिए कोणीय के लिए एक कॉल है, 2 डी () हमारे फ़ंक्शन को कॉल करता है और वह है जहां हम किसी भी पैरामीटर को पास करते हैं। HTH

— स्टीव

Answer 3

आपके 'परीक्षण' निर्देशक एचटीएमएल टैग में, फ़ंक्शन का विशेषता नाम ऊंटदार नहीं , बल्कि डैश-आधारित होना चाहिए ।

इसलिए - इसके बजाय:

<test color1="color1" updateFn="updateFn()"></test>

लिखो:

<test color1="color1" update-fn="updateFn()"></test>

यह निर्देशकीय विशेषताओं (जैसे अद्यतन-एफएन फ़ंक्शन) और कार्यों के बीच अंतर बताने के लिए कोणीय तरीका है।

Comments

पकड़ने के लिए धन्यवाद। मैंने अपने उत्तर में इसे शामिल किया है। वोट दिया! :)

— ऑलवेज़नर

Answer 4

द्विदिश बंधन के साथ नियंत्रक फ़ंक्शन को पारित करने के बारे में कैसे ? तब आप इसे निर्देश में ठीक उसी तरह से उपयोग कर सकते हैं जैसे एक नियमित टेम्पलेट में (मैं सादगी के लिए अप्रासंगिक भागों को छीन लेता हूं):

<div ng-controller="testCtrl">

   <!-- pass the function with no arguments -->
   <test color1="color1" update-fn="updateFn"></test>
</div>

<script>
   angular.module('dr', [])
   .controller("testCtrl", function($scope) {
      $scope.updateFn = function(msg) {
         alert(msg);
      }
   })
   .directive('test', function() {
      return {
         scope: {
            updateFn: '=' // '=' bidirectional binding
         },
         template: "<button ng-click='updateFn(1337)'>Click</button>"
      }
   });
</script>

मैं इस सवाल पर उतरा, क्योंकि मैंने बीफ़ के ऊपर विधि की कोशिश की, लेकिन किसी तरह यह काम नहीं किया। अब यह पूरी तरह से काम करता है।

Answer 5

विशेषता नाम के लिए डैश और निचले मामले का उपयोग करें (अन्य उत्तरों की तरह):

 <test color1="color1" update-fn="updateFn()"></test>

और निर्देशात्मक दायरे में "&" के बजाय "=" का उपयोग करें:

 scope: { updateFn: '='}

फिर आप किसी अन्य फ़ंक्शन की तरह अपडेट का उपयोग कर सकते हैं:

 <button ng-click='updateFn()'>Click</button>

तुम वहाँ जाओ!

Comments

आप 'और' के बजाय '=' का उपयोग क्यों करेंगे? जब मैंने यह कोशिश की तो यह बार-बार अपने फंक्शन को बुलाता रहा।

— user1012500

इसके लिए '=' का उपयोग करना गलत है। यह दो तरह से ऑब्जेक्ट बाइंडिंग के लिए है।

— बेन टालियाडोरोस

मुझे लगता है, एकमात्र समस्या पहले टेम्पलेट में कोष्ठक का उपयोग है। यह फ़ंक्शन को निष्पादित करता है फिर परिणाम को बांधता है। इसके बजाय आपको केवल फ़ंक्शन का नाम इस तरह से पास करना चाहिए:update-fn="updateFn"

— मर्टन तामेस

बुरा जवाब। बहुत बुरा।

— towry

Answer 6

मुझे "&" के बजाय "=" बाइंडिंग का उपयोग करना पड़ा क्योंकि वह काम नहीं कर रहा था। अजीब सा व्यवहार।

Comments

ऐसा इसलिए है क्योंकि आप निष्पादन के बजाय सीधे जेएस फ़ंक्शन संदर्भ निर्देश पारित कर रहे हैं। जब आप फ़ंक्शन को निर्देश के तर्क के रूप में पास करते हैं, तो आपको update-fn="updateFn()"कोष्ठक (और शायद params) को शामिल करना होगा। इसे एक फ़ंक्शन संदर्भ के रूप में पास करना बंधन के update-fn="updateFn"साथ काम नहीं करेगा&

— JorgeGRC

Answer 7

@JorgeGRC आपके उत्तर के लिए धन्यवाद। एक बात हालांकि, "शायद" हिस्सा बहुत महत्वपूर्ण है। आप पैरामीटर (रों) है, तो आप अपने टेम्पलेट पर साथ ही साथ शामिल करना चाहिए यह / उन्हें और अपने निर्दिष्ट करना सुनिश्चित करें स्थानीय लोगों जैसे updateFn({msg: "Directive Args"}।