AngularJS How to call directive function from controller

Question

I was looking for a way to find out how to call a function inside a directive from the controller. I got the snip but hence I am new to Angular, the below code flow is not very clear. Anyone mind to explain how the code is working. Thanks.

// Directive 
<map set-fn="setDirectiveFn(theDirFn)"></map>

scope: { setFn: '&' },
link: function(scope, element, attrs) {
    scope.updateMap = function() {
       alert('inside updateMap()');
    }
    scope.setFn({theDirFn: scope.updateMap});
}

// Controller
<button ng-click="directiveFn()">call directive function</button>
function MyCtrl($scope) {
    $scope.setDirectiveFn = function(directiveFn) {
        $scope.directiveFn = directiveFn;
    };
}

Lex · Accepted Answer · 2016-05-11 14:51:24Z

Starting with the controller, this block creates a setDirectiveFn() method on the $scope object in your controller that takes a single parameter (directiveFn) and then uses that parameter to create a directiveFn() method on the $scope object in your controller.

    $scope.setDirectiveFn = function(directiveFn) {
        $scope.directiveFn = directiveFn;
    };

Inside the directive it is creating an updateMap() method on the scope object in the directive and then calling the setFn() method which is mapped to the $scope.setDirectiveFn() method by this line: <map set-fn="setDirectiveFn(theDirFn)"></map> in your HTML and this line: scope: { setFn: '&' } in your directive. It is passing the scope.updateMap() method which effectively sets $scope.directiveFn() in your controller equal to scope.updateMap() in your directive.

link: function(scope, element, attrs) {
    scope.updateMap = function() {
       alert('inside updateMap()');
    }
    scope.setFn({theDirFn: scope.updateMap});
}

The button is then calling $scope.directiveFn() in your controller which has been mapped to scope.updateMap() in your directive.

<button ng-click="directiveFn()">call directive function</button>

aseferov · Accepted Answer · 2016-05-11 14:43:39Z

12

you can do it with angular pubsub

link: function(scope, element, attrs) {
    scope.updateMap = function() {
       alert('inside updateMap()');
    }
    scope.setFn({theDirFn: scope.updateMap});

    scope.$on('eventName', function(event, data){
       //call directive function here
    })
}

function MyCtrl($scope) {

      $scope.$broadcast('eventName', data)
}

answered May 11, 2016 at 14:43

aseferov

6,4233 gold badges20 silver badges24 bronze badges

Comments

Santosh Kumar · Accepted Answer · 2019-07-28 11:31:07Z

3

Just call the directive function from your controller/template and initialise that function in your directive using two-way binding symbol

var app = angular.module('myApp', [])
 .controller('AppCtrl', function($scope){
 })
.directive('tabBar', function(){
return {
    restrict: 'E',
    scope: {
        tabClick: '='
    }, 
    templateUrl: 'templates/tabbar.tpl.html',
    link: function(scope) {
                    scope.tabClick = function(str) {
            alert(str);
        }
    }
   };
   });

Working sample

Note: Tested and working

answered Jul 28, 2019 at 11:31

Santosh Kumar

2052 silver badges6 bronze badges

Comments

Andrew Donovan · Accepted Answer · 2016-05-11 14:49:59Z

1

I recommend reading this article : http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-2-isolate-scope

Basically, your directive has an Isolate Scope set by scope: {setFn: '&'}

What this does is that when you can send data to your directive via attributes, in this case, the set-fn attribute.

in your directive, scope.setFn now contains the function sent to it via attribute in your html (setDirectiveFn(theDirFn))

So calling scope.setFn({theDirFn: scope.updateMap});

Calls the function defined in

function MyCtrl($scope) {
    $scope.setDirectiveFn = function(directiveFn) {
         $scope.directiveFn = directiveFn;
    };
}

answered May 11, 2016 at 14:49

Andrew Donovan

5522 silver badges14 bronze badges

Collectives™ on Stack Overflow

AngularJS How to call directive function from controller

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related