angular.js: मूल डोम से निर्देशक के डोम से ngclick कैसे पास करें?

Question

हाय मैं इस "confirmable" बटन के निर्देश जो मैं पर काम कर रहा हूँ,

एचटीएमएल कोड कि निर्देश 'confirmable' ट्रिगर किया जाएगा है

 <span confirmable ng-click='users.splice($index,1)'></span> 

निर्देश: (coffeescript)

angular.module('buttons',[]) 

    .directive 'confirmable',() -> 
    template: """ 
     <button class='btn btn-mini btn-danger'> 
     Destroy 
     </button> 
    """ 
    replace: yes 

तो अंतिम परिणाम मैं इस निर्देश के साथ उत्पन्न होते देखना चाहते हैं

 <button class='btn btn-mini btn-danger' ng-click='users.splice($index,1)'> 
     Destroy 
     </button> 

है

अब तक मैं निर्देश

angular.module('buttons',[]) 

    .directive 'confirmable',() -> 
    template: """ 
     <button class='btn btn-mini btn-danger'> 
     Destroy 
     </button> 
    """ 
    replace: yes 
    link: (scope, el, attrs) ->    <---------- linking function 
     $(el).attr 'ng-click', attrs.ngClick 

अंदर एक जोड़ने समारोह के साथ काम करने यह मिल गया लेकिन मैं निर्देश प्रलेखन के माध्यम से फिर से चले गए हैं, और =, @, & ऑपरेटरों लेकिन मैं साथ गुंजाइश संपत्ति पाया वास्तव में अनिश्चित हूं अगर वे मुझे चाहिए। फिर इस ट्रांज़ेक्चर गुण हैं जिन्हें मुझे अभी भी समझने की आवश्यकता है लेकिन फिलहाल यह सहायक नहीं लगता है। तो जब मेरा लिंकिंग फ़ंक्शन अब चाल करता है, लेकिन मैंने सोचा कि मुझे यह देखने के लिए पूछना चाहिए कि क्या कोणीय एक अधिक सुरुचिपूर्ण समाधान प्रदान करता है।

धन्यवाद!

Answer 1

यह मेरे लिए लगता है कि आप अपने निर्देश के भीतर से एक माता पिता के दायरे से एक विधि कॉल करना चाहते हैं ...

मैं एक साथ रख दिया एक Plunk here

(क्षमा करें, मैं जावास्क्रिप्ट की तरह ... तो यहां जाता है)

यहां आप मूल नियंत्रक हैं।

app.controller('ParentCtrl', function($scope) { 
    $scope.fooCalled = 0; 
    $scope.foo = function() { 
     $scope.fooCalled++; 
    }; 
}); 

फिर

<div ng-controller="ParentCtrl"> 
    Foo Called: {{fooCalled}}<br/> 
    <button ng-click="foo()">Call From Parent</button><br/> 
    <custom-control custom-click="foo()"></custom-control> 
</div> 

और अपने निर्देश घोषणा अपनी छाप:

app.directive('customControl', function(){ 
    return { 
    restrict: 'E', 
    scope: { 
     innerFoo: '&customClick' 
    }, 
    template: '<button ng-click="innerFoo()">Call From Control</button>' 
    }; 
}); 

अपने निर्देश परिभाषा scope घोषणा में थोड़ा क्या करने के लिए माता पिता के दायरे समारोह संदर्भ बाँधती है आपके निर्देश का दायरा इसलिए इसे क्लिक पर बुलाया जा सकता है। & यही है।

Answer 2

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

http://jsfiddle.net/V7Kpb/12/

निर्देश प्रतिलिपि बनाई जा रही लिंक चरण में अधिक जिम्मेदार बताते हैं जहाँ तक कोणीय का सवाल है कुछ भी नहीं करता है। आपके पास ng-click विशेषता वाला एक बटन होगा लेकिन एंगुलर को डीओएम संसाधित करने के बाद जोड़ा गया था।

यह भी ध्यान दें, element लिंक फ़ंक्शन के दूसरे पैरामीटर के रूप में पहले से ही jQLite (और संभावित रूप से पूर्ण jQuery है यदि आपने इसमें भी लिंक किया है।) इसे जरूरी करने की आवश्यकता नहीं है।

इसके अलावा, अलग-अलग क्षेत्रों के बारे में (=, @ और & का उल्लेख है)। यह एक सुंदर सुरुचिपूर्ण वाक्यविन्यास है लेकिन बड़े पैमाने पर एक ही तत्व पर कोई अन्य निर्देश भी दायरे से अलग हो जाता है। तो यदि आप ngModel के साथ काम करना चाहते हैं जो एक आम बात है तो आप एक अलग दायरे का उपयोग नहीं कर सकते हैं। असल में इस मामले में, यदि आप एक अलग स्कोप का उपयोग करते हैं तो एनजी-क्लिक काम करना बंद करें। क्योंकि यह अभिव्यक्ति का मूल्यांकन करने का प्रयास करेगा जिसमें उन चीज़ों को शामिल किया गया है जो स्पष्ट रूप से दायरे {} संपत्ति में घोषित नहीं हैं।

Answer 3

यदि आप लिंक चरण में डीओएम में हेरफेर करते हैं और इसके तत्व (ओं) में कोणीय तर्क जोड़ना चाहते हैं तो इसे प्रभावित तत्वों को संकलित करने की आवश्यकता है। कोणीय को $compile इंजेक्ट करने दें और डीओएम को संसाधित करने के बाद इसे आमंत्रित करें और अपना ng-* निर्देश जोड़ें।

function MyDirective($compile) 
 
{ 
 
    return { 
 
     
 
     restrict: "AE", 
 
     templateUrl: "/path", 
 
     link: (scope, element, attributes) => 
 
     { 
 
      // Add your directives 
 

 
      $compile(element.contents())(scope); 
 
     } 
 
    }; 
 
}