Direttiva AngularJs: metodo call dall'ambito padre all'interno del modello

Question

Sono piuttosto nuovo rispetto alle direttive Angular e sto avendo un sacco di problemi nel far questo per fare ciò che voglio. Ecco le basi di quello che ho:

Controller:

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

direttiva:

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

Template (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> 

Se non è chiaro, voglio che il tag <edit-button> contenga tre pulsanti diversi, ognuno dei quali interagisce con qualsiasi proprietà di ambito passata in ng-edit. Quando si fa clic, devono cambiare la proprietà, quindi chiamare il metodo di ambito appropriato.

Il modo in cui è ora, cliccando sui pulsanti cambia correttamente i valori di $scope.editing, ma la updateProfile e cancelProfile metodi non funzionano. Potrei non essere d'accordo su come utilizzare correttamente le direttive, ma ho difficoltà a trovare un esempio online per aiutarmi a realizzare ciò che sto cercando di fare. Qualsiasi aiuto sarebbe apprezzato.

Answer 1

Un modo sarebbe chiamare le funzioni utilizzando $parent.

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

Demo

Un altro modo (e probabilmente il modo migliore), è quello di configurare isolato campo di applicazione del vostro direttiva per contenere riferimenti a quelle funzioni del controller:

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

Poi si passa le funzioni tramite HTML:

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

Demo