कोणीय: बाइंड कॉलबैक का उपयोग कर और और पास-में तर्क समारोह

Question

मैं एक (सरलीकृत) निर्देश

angular.module('myApp') 
    .directive('myButton', function() { 
     return { 
      restrict: 'E', 
      scope: { 
       callbackFn: '&' 
      }, 
      template: '<button ng-click=ca;;backFn($evenb)' 
     } 
    }); 

अब, कुछ माता पिता नियंत्रक में मैं एक कॉलबैक फ़ंक्शन परिभाषित किया है:

this.myCallback = function ($event) { 
    this.doIt($event); 
} 

और HTML:

<my-button callback-fn="page.myCallback()"></my-button> 

(मैं bindToController और controllerAs जैसी चीजों का उपयोग कर रहा)

समस्या यह है कि $event को कभी भी myCallback पर पास नहीं किया गया है, जो मुझे इस फ़ंक्शन को बाध्य करने के साथ सबसे अधिक संभावना है (&)। लेकिन दूसरी ओर, myCallback के अंदर मैं this का उपयोग करना चाहता हूं।

क्या इसे ठीक करने का कोई तरीका है?

var self = this; 
this.myCallback = function ($event) { 
    self.doIt($event); 
} 

Answer 1

आपने अपनी बाइंडिंग को पूरी तरह से सही तरीके से सेट नहीं किया है। आप एक कुंजी-मूल्य मानचित्र के माध्यम से निर्देशक से मूल नियंत्रक को निर्देशों को वापस पास कर सकते हैं। angular docs (जोर मेरा) के अनुसार:

& या &attr - माता-पिता गुंजाइश के संदर्भ में एक अभिव्यक्ति निष्पादित करने के लिए एक तरह से प्रदान करता है। यदि कोई attr नाम निर्दिष्ट नहीं किया गया है तो विशेषता नाम स्थानीय नाम के समान माना जाता है। <widget my-attr="count = count + value"> और scope: { localFn:'&myAttr'} की विजेट परिभाषा को देखते हुए, फिर स्कोप प्रॉपर्टी localFn अलग करें count = count + value अभिव्यक्ति के लिए फ़ंक्शन रैपर को इंगित करेगी। प्रायः यह वांछनीय वांछित दायरे से डेटा को पारदर्शी दायरे में अभिव्यक्ति के माध्यम से पास करने के लिए वांछनीय है, यह अभिव्यक्ति रैपर एफएन में स्थानीय चर नामों और मानों का नक्शा पास करके किया जा सकता है। उदाहरण के लिए, यदि अभिव्यक्ति increment(amount) है तो हम localFn को localFn({amount: 22}) के रूप में कॉल करके राशि मान निर्दिष्ट कर सकते हैं।

ताकि अपने लेने वाली HTML में मतलब है कि आप पैरामीटर जोड़ने होंगे:

<my-button callback-fn="page.myCallback(parentEvent)"></my-button> 

और फिर निर्देश में:

...... 
restrict: 'E', 
scope: { 
      callbackFn: '&' 
     }, 
template: '<button ng-click="ctrl.callbackFn({parentEvent: $event})">Callback</button>' 

,

Answer 2

मेरे हिसाब से की तरह काम करने के बिना आप इसे इस तरह से करना चाहिए:

अपने HTML पृष्ठ में:

<my-button callback-fn="page.myCallback(event)"></my-button> 

अपने निर्देश में:

angular.module('myApp') 
    .directive('myButton', function() { 
     return { 
      restrict: 'E', 
      controller: 'Controller', 
      bindToController: true, 
      scope: { 
       callbackFn: '&' 
      }, 
      template: '<button ng-click=foo($event)' 
     } 
}); 

function Controller() { 
    this.foo = function (event) { 
     this.callbackFn({event: event}); 
    } 
} 

लेकिन मैं मैं नहीं पूछता कि आपके प्रश्न का क्या मतलब है।