Call control function from a directive template in AngularJS

Question

I found many examples of calling a controller function from a directive, but could not find an example of a call from a directive template.

Let's say I have this HTML code to open a modal directive

<button ng-click='toggleModal()'>Open</button> <modal-dialog show='modalShown' confirm="confirmCtrl()"> <p>Modal Content Goes here<p> </modal-dialog> 

Here is my controller with confirmCtrl () function I want to call:

 myApp.controller('myController', function($scope){ $scope.modalShown = false; $scope.toggleModal = function() { $scope.modalShown = !$scope.modalShown; }; $scope.confirmCtrl = function () { alert('confirmed'); } 

})

And here is my directive. I

 .directive('modalDialog', function(){ return { restrict: 'E', scope: { show: '=', corfirm: '&' }, replace: true, transclude: true, link: function(scope, element, attrs) { scope.hideModal = function() { scope.show = false; }; }, template: "<div class='ng-modal' ng-show='show'><div class='ng-modal-overlay' ng-click='hideModal()'></div><div class='ng-modal-dialog' ng-style='dialogStyle'><div class='ng-modal-close' ng-click='hideModal()'>X</div><div class='ng-modal-dialog-content' ng-transclude></div><button ng-click=""> Confirm </button></div></div>" 

};

In my template, I have a button and I want to call the confirmCtrl () function on click, however I could not figure out how to do this

The fiddle works here http://jsfiddle.net/anao4nsw/

Answer 1

You can define your controller in your directive in the same way as you can add the ng-click directive to the "Confirm" button element in your template.

 .directive('modalDialog', function(){ return { controller: 'myController' //This line. restrict: 'E', scope: { show: '=', corfirm: '&' }, replace: true, transclude: true, link: function(scope, element, attrs) { scope.hideModal = function() { scope.show = false; }; }, template: "<div class='ng-modal' ng-show='show'><div class='ng-modal-overlay' ng-click='hideModal()'></div><div class='ng-modal-dialog' ng-style='dialogStyle'> <div class='ng-modal-close' ng-click='hideModal()'>X</div><div class='ng-modal-dialog-content' ng-transclude></div> <button ng-click='confirmCtrl()'> Confirm </button></div></div>" 

Note the addition of ng-click = 'confirmCtrl ()' in the last line of your template.

Answer 2

You almost did what you needed. & -binding does the trick: it assigns a function to the property of the selection area, and this function executes the expression specified in the attribute when called. So in your template, you just need to call this selection area function in ng-click: <button ng-click="confirm()"> Confirm </button> . This may not work for you due to a typo: you have coRfirm: '&' instead of coNfirm: '&' .

Answer 3

Your directive will look like this, this work is very good. Check it out, just copy and replace the current directive

 app.directive('modalDialog', function(){ return { restrict: 'E', scope: { show: '=', confirm: '&' }, replace: true, transclude: true, link: function(scope, element, attrs) { scope.hideModal = function() { scope.show = false; }; }, template: "<div class='ng-modal' ng-show='show'><div class='ng-modal-overlay' ng-click='hideModal()'></div><div class='ng-modal-dialog' ng-style='dialogStyle'><div class='ng-modal-close' ng-click='hideModal()'>X</div><div class='ng-modal-dialog-content' ng-transclude></div><button ng-click='confirm()'> OK </button></div></div>" }; });