Dyrektywa AngularJs: metoda wywołania z zakresu nadrzędnego w szablonie

Question

Jestem całkiem nowy w dyrektywach Angular i mam wiele problemów z uzyskaniem tego, co chcę. Oto podstawy, co mam:

Kontroler:

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

dyrektywa:

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

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

Jeśli nie jest jasne, chcę, aby znacznik <edit-button> zawierał trzy różne przyciski, z których każdy wchodzący w interakcje z dowolną właściwością zakresu został przekazany do ng-edit. Po kliknięciu powinni zmienić tę właściwość, a następnie wywołać odpowiednią metodę zasięgu.

Sposób, w jaki jest teraz, kliknięcie przycisków prawidłowo zmienia wartości $scope.editing, ale metody updateProfile i cancelProfile nie działają. Mogę być daleko od tego, jak właściwie używać dyrektyw, ale mam problem ze znalezieniem przykładu online, aby pomóc mi osiągnąć to, co próbuję zrobić. Każda pomoc będzie doceniona.

Answer 1

Jednym ze sposobów byłoby wywołanie funkcji za pomocą $parent.

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

Demo

Innym sposobem (i chyba lepszy sposób), należy skonfigurować samodzielnie zakres swojej dyrektywie, aby zawierać odnośniki do tych funkcji kontrolera:

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

Następnie można przejść do poszczególnych funkcji przez HTML:

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

Demo