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/

Lee Brindley · Accepted Answer · 2014-08-09 13:08:07Z

4

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.

edited Aug 9, 2014 at 13:08

answered Aug 9, 2014 at 12:58

Lee Brindley

6,5326 gold badges44 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Thomas Decaux Over a year ago

Woa, this will create another instance of your controller, so pay attention!

thorn0 · Accepted Answer · 2014-08-09 16:22:33Z

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: '&'.

answered Aug 9, 2014 at 16:22

thorn0

10.6k6 gold badges71 silver badges101 bronze badges

Comments

glider · Accepted Answer · 2016-01-26 16:29:23Z

Your directive it would look so, this work very good. Test it, only 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>"
    };
   });

Collectives™ on Stack Overflow

Call controller function from directive template in AngularJS

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related