AngularJS में अलग-अलग दायरे के बिना निर्देश से नियंत्रक फ़ंक्शन को कॉल करें


Answers

आप AngularJS में $ पार्स सेवा का उपयोग करना चाहते हैं।

तो आपके उदाहरण के लिए:

.directive('confirm', function ($parse) {
    return {
        restrict: 'A',

        // Child scope, not isolated
        scope : true,
        link: function (scope, element, attrs) {
            element.bind('click', function (e) {
                if (confirm(attrs.confirm)) {
                    scope.$apply(function(){

                        // $parse returns a getter function to be 
                        // executed against an object
                        var fn = $parse(attrs.confirmAction);

                        // In our case, we want to execute the statement in 
                        // confirmAction i.e. 'doIt()' against the scope 
                        // which this directive is bound to, because the 
                        // scope is a child scope, not an isolated scope. 
                        // The prototypical inheritance of scopes will mean 
                        // that it will eventually find a 'doIt' function 
                        // bound against a parent's scope.
                        fn(scope, {$event : e});
                    });
                }
            });
        }
    };
});

$ पार्स का उपयोग करके संपत्ति स्थापित करने के साथ एक गॉचा है, लेकिन जब आप इसमें आएंगे तो मैं आपको उस पुल को पार करने दूँगा।

Question

मुझे अलग-अलग दायरे का उपयोग किए बिना निर्देश के भीतर माता-पिता के दायरे पर एक फ़ंक्शन कॉल करने का कोई तरीका नहीं दिख रहा है। मुझे पता है कि अगर मैं अलग-अलग दायरे का उपयोग करता हूं तो मैं पैरेंट स्कोप पर फ़ंक्शन तक पहुंचने के लिए अलग-अलग में "&" का उपयोग कर सकता हूं, लेकिन जब आवश्यक नहीं है तो अलग-अलग दायरे का उपयोग करके परिणाम होते हैं। निम्नलिखित एचटीएमएल पर विचार करें:

<button ng-hide="hideButton()" confirm="Are you sure?" confirm-action="doIt()">Do It</button>

इस सरल उदाहरण में, मैं एक जावास्क्रिप्ट पुष्टिकरण संवाद दिखाना चाहता हूं और केवल कॉल करें () को कॉल करता हूं यदि वे पुष्टिकरण संवाद में "ठीक" पर क्लिक करते हैं। यह एक अलग दायरे का उपयोग कर सरल है। निर्देश इस तरह दिखेगा:

.directive('confirm', function () {
    return {
        restrict: 'A',
        scope: {
            confirm: '@',
            confirmAction: '&'
        },
        link: function (scope, element, attrs) {
            element.bind('click', function (e) {
                if (confirm(scope.confirm)) {
                    scope.confirmAction();
                }
            });
        }
    };
})

लेकिन समस्या यह है कि, क्योंकि मैं अलग-अलग दायरे का उपयोग कर रहा हूं, ऊपर दिए गए उदाहरण में एनजी-छुपा अब माता-पिता के दायरे के खिलाफ निष्पादित नहीं है , बल्कि अलग-अलग दायरे में है (क्योंकि किसी भी निर्देश पर एक अलग दायरे का उपयोग करने से उस तत्व पर सभी निर्देश होते हैं पृथक गुंजाइश का उपयोग करें)। यहां उपरोक्त उदाहरण का एक jsFiddle है जहां ng-hide काम नहीं कर रहा है। (ध्यान दें कि इस पहेली में, जब आप इनपुट बॉक्स में "हाँ" टाइप करते हैं तो बटन को छिपाना चाहिए।)

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

यहां एक jsfiddle है जहां मैं अलग-अलग दायरे का उपयोग नहीं कर रहा हूं और ng-hide ठीक काम कर रहा है, लेकिन, ज़ाहिर है, पुष्टि करने के लिए कॉलएक्शन () काम नहीं करता है, और मुझे नहीं पता कि इसे कैसे काम करना है।

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

वैकल्पिक रूप से, मुझे ऐसे समाधानों को सुनने में दिलचस्पी होगी जो अलग-अलग दायरे का उपयोग करते हैं यदि अन्य निर्देश अभी भी मूल दायरे के खिलाफ काम करेंगे , लेकिन मुझे नहीं लगता कि यह संभव है।




मेरे पास एकमात्र समस्या यह है कि, यदि मैं इसे अलग-अलग दायरे में पास नहीं करता हूं तो मैं अभिभावक के दायरे पर एक विधि कैसे कॉल करूं?

यहां एक jsfiddle है जहां मैं अलग-अलग दायरे का उपयोग नहीं कर रहा हूं और ng-hide ठीक काम कर रहा है, लेकिन, ज़ाहिर है, पुष्टि करने के लिए कॉलएक्शन () काम नहीं करता है और मुझे नहीं पता कि इसे कैसे काम करना है।

पहला एक छोटा बिंदु: इस मामले में बाहरी नियंत्रक का दायरा निर्देश के दायरे का मूल दायरा नहीं है; बाहरी नियंत्रक का दायरा निर्देश का दायरा है। दूसरे शब्दों में, निर्देश में उपयोग किए जाने वाले परिवर्तनीय नाम सीधे नियंत्रक के दायरे में देखे जाएंगे।

इसके बाद, attrs.confirmAction() लिखना काम नहीं करता है क्योंकि इस बटन के लिए attrs.confirmAction ,

<button ... confirm-action="doIt()">Do It</button>

स्ट्रिंग "doIt()" , और आप स्ट्रिंग को कॉल नहीं कर सकते हैं, उदाहरण के लिए "doIt()"()

आपका प्रश्न वास्तव में है:

जब मैं स्ट्रिंग के रूप में अपना नाम रखूं तो मैं फ़ंक्शन कैसे कॉल करूं?

जावास्क्रिप्ट में, आप ज्यादातर डॉट नोटेशन का उपयोग करके फ़ंक्शन कॉल करते हैं, जैसे:

some_obj.greet()

लेकिन आप सरणी नोटेशन का भी उपयोग कर सकते हैं:

some_obj['greet']

ध्यान दें कि सूचकांक मान एक स्ट्रिंग है । तो, आपके निर्देश में आप बस यह कर सकते हैं:

  link: function (scope, element, attrs) {

    element.bind('click', function (e) {

      if (confirm(attrs.confirm)) {
        var func_str = attrs.confirmAction;
        var func_name = func_str.substring(0, func_str.indexOf('(')); // Or func_str.match(/[^(]+/)[0];
        func_name = func_name.trim();

        console.log(func_name); // => doIt
        scope[func_name]();
      }
    });
  }



Links