Call controller function from directive template in AngularJS

Question

I've found plenty examples of calling controller function from directive however couldn't find an example of calling it from directive template.

Let's say I've got this HTML code to open modal directive

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

Here's my controller with a function confirmCtrl() 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's 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've got a button and I want to call confirmCtrl() function on click, however, couldn't grasp how to do it

Here's a working fiddle http://jsfiddle.net/anao4nsw/

Answer 1

You can define your controller in your directive like so, and add an ng-click directive to the button element 'Confirm' 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 the ng-click='confirmCtrl()' in the last line of your template.

Answer 2

You've almost done what you need. The &-binding does the trick: it assigns a function to the property of the isolate scope and this function when called executes the expression specified in the attribute. So in your template, you just have to call this function of the isolate scope in ng-click: <button ng-click="confirm()"> Confirm </button>. It might not work for you because of a typo: you have coRfirm: '&' instead of coNfirm: '&'.