Angular directive: call method from the parent area inside the template

Question

I am new to Angular directives and I have a lot of problems in doing what I want. Here are the basics of what I have:

Controller:

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

Directive

 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> 

If this is not clear, I want the <edit-button> contain three different buttons, each of which interacts with any scope property, passed to ng-edit . When clicked, they should change this property, and then call the corresponding area method.

Now, by clicking the buttons, change the $scope.editing values $scope.editing , but the updateProfile and cancelProfile do not work. I may be aloof from using the directives correctly, but it's hard for me to find an example online to help me accomplish what I'm trying to do. Any help would be appreciated.

Answer 1

One way is to call functions using $parent .

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

Demo

Another way (and probably the best way) is to configure an isolated area of ​​the directive to reference these controller functions:

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

Then you pass the functions through HTML:

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

Demo