एंगुलरजेएस निर्देश: टेम्पलेट के भीतर मूल दायरे से कॉल विधि

Question

मैं कोणीय निर्देशों के लिए काफी नया हूं, और मुझे यह करने में बहुत परेशानी हो रही है जो मैं चाहता हूं। यहाँ की मूल बातें है कि मैं क्या है:

नियंत्रक:

controller('profileCtrl', function($scope) { 
    $scope.editing = { 
    'section1': false, 
    'section2': false 
    } 
    $scope.updateProfile = function() {}; 
    $scope.cancelProfile = function() {}; 
}); 

निर्देशक:

directive('editButton', function() { 
    return { 
    restrict: 'E', 
    templateUrl: 'editbutton.tpl.html', 
    scope: { 
     editModel: '=ngEdit' 
    } 
    }; 
}); 

टेम्पलेट (editbutton.tpl.html):

<button 
    ng-show="!editModel" 
    ng-click="editModel=true"></button> 
<button 
    ng-show="editModel" 
    ng-click="updateProfile(); editModel=false"></button> 
<button 
    ng-show="editModel" 
    ng-click="cancelProfile(); editModel=false"></button> 

HTML:

<edit-button ng-edit="editing.section1"></edit-button> 

यदि यह स्पष्ट नहीं है, तो मैं <edit-button> टैग को तीन अलग-अलग बटनों के साथ रखना चाहता हूं, प्रत्येक जो भी स्कोप संपत्ति ng-edit में पारित हो जाती है। क्लिक करने पर, उन्हें उस संपत्ति को बदलना चाहिए और फिर उपयुक्त स्कोप विधि को कॉल करना चाहिए।

जिस तरह से यह अब, बटन पर क्लिक सही ढंग से $scope.editing के मूल्यों में परिवर्तन है, लेकिन updateProfile और cancelProfile तरीकों काम नहीं करते। मैं निर्देशों का सही तरीके से उपयोग करने के आधार पर आधार से दूर हो सकता हूं, लेकिन मुझे जो कुछ करने की कोशिश कर रहा है उसे पूरा करने में मेरी सहायता के लिए मुझे ऑनलाइन उदाहरण खोजने में परेशानी हो रही है। किसी भी सहायता की सराहना की जाएगी।

Answer 1

एक तरीका $parent का उपयोग करके कार्यों को कॉल करना होगा।

app.directive('editButton', function() { 
    return { 
    restrict: 'E', 
    templateUrl: 'editbutton.tpl.html', 
    scope: { 
     editModel: '=ngEdit', 
     updateProfile: '&', 
     cancelProfile: '&' 
    } 
    }; 
}); 

तो फिर तुम में कार्य पारित:

<button ng-show="editModel" ng-click="$parent.cancelProfile(); editModel=false">b3</button> 

Demo

एक और तरीका है (और शायद बेहतर तरीका), उन नियंत्रक कार्यों के संदर्भ हो करने के लिए अपने निर्देश के अलग गुंजाइश कॉन्फ़िगर करने के लिए है एचटीएमएल के माध्यम से:

<edit-button ng-edit="editing.section1" update-profile='updateProfile()' cancel-profile='cancelProfile()'></edit-button> 

Demo