Calling controller function from directive using bindToController

Question

I wrote a plunker to see how to use bindToDirective to isolate scopes and using directive controller to call main controller function, but, I am doing something wrong. Could you suggest?

This is the plunker: http://plnkr.co/edit/UJLjTmIiHydHr8qRzAsX?p=preview

Code sample:

.controller('Ctrl', function() {
  var self = this;
  self.func = function() {
    console.log('In the controller function');
  };
})

.directive('myDirective', [ function() {
  var self = {};
  self.link = function (scope, elem, attrs, ctrl) {
      elem.bind('click', function () {
          ctrl.ctrlFunc();
      });
      elem.addClass('fa fa-file-excel-o fa-lg');
  };
  return {
      restrict: 'E',
      scope: {},
      controller: function () {
      },
      controllerAs: 'DirCtrl',
      bindToController: {
          ctrlFunc: '&'
      },
      link: self.link
  };
}])

html sample to associate main controller function to directive:

<div ng-controller="Ctrl">
  <my-directive ctrlfunc="Ctrl.func()"></my-directive>
</div>

David L · Accepted Answer · 2016-03-28 17:15:56Z

2

You have a number of issues:

You need a hyphen in your directive argument name and you should be passing the function reference, not calling the function directly (with params):

<my-directive ctrl-func="ctrl.func"></my-directive>

Second, you are using alias syntax in your controller (var self = this;), but not in your template. You need to update it to the following:

<div ng-controller="Ctrl as ctrl">
  <my-directive ctrl-func="ctrl.func"></my-directive>
</div>

Finally, pass down the function reference with two-way binding instead of with & since that passes down values for implicit evaluation.

 bindToController: {
      ctrlFunc: '='
  },

See working plunkr

edited Mar 28, 2016 at 17:15

answered Mar 28, 2016 at 17:10

David L

34.1k8 gold badges70 silver badges98 bronze badges

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

Comments

malix · Accepted Answer · 2016-03-28 17:31:46Z

I'm not sure you need bindToController...

This version calls your Ctrl's function: http://plnkr.co/edit/Rxu5ZmmUAU8p63hR2Qge?p=preview

JS

angular.module('plunker', [])
.controller('Ctrl', function($scope) {
  $scope.func = function() {
    console.log('In the controller function');
  };
})    angular.module('plunker', [])

  .controller('Ctrl', function($scope) {
    $scope.func = function() {
      console.log('In the controller function');
    };
  })

  .directive('myDirective', [ function() {
    return {
        template: '<pre>[clickme]</pre>',
        replace: true,
        restrict: 'E',
        scope: {
          target: '&'
        },
        link: function (scope, elem, attrs) {
            elem.bind('click', function () {
                var fn = scope.target && scope.target(scope);
                fn && fn();
            });
            elem.addClass('fa fa-file-excel-o fa-lg');
        }
    };
  }])

HTML

<div ng-controller="Ctrl">
  <my-directive target="func"></my-directive>
</div>

Collectives™ on Stack Overflow

Calling controller function from directive using bindToController

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related