How to call custom directive programmatically in angularjs

Question

Is there a way to call a custom directive function from a function inside controller.

var m=angular.module('myApp',[]).controller('test',function($scope){
//here i want to call input directive

});

m.directive('input', function() {});

That is not the primary intent of the direct definition object. Please elaborate your scenario. — Chandermani, Sep 24 '15 at 06:44

Vasyl · Answer 1 · 2015-09-24T07:27:05.550

For calling directive function you need to use event dispatching:

var m=angular.module('myApp',[]).controller('test',function($rootScope){
  $rootScope.$emit('event-response', result);
  ...
});

m.directive('input', function($rootScope) {
  ...
  $rootScope.$on('event-response', function (args) {
    //function call...
  });
 .....
});

Update

We can use shared scope to add function from directive to parent controller. It is unlikely to inherit from parent controller scope, because this way creates very strong coupling, and you need remember that you inherited from parent when you're reusing this directive.

var m=angular.module('myApp',[]).controller('test',function($scope){
  $scope.myFunc() // available from `input` directive
  ...
});

m.directive('input', function() {
  return {
    scope: false, // scope is shared with parent controller
    controller: function($scope) {
      $scope.myFunc = function() {
        ...
      };
    }
  };
});

score 1 · Accepted Answer · answered Sep 24 '15 at 07:18

You can pass to the directive a controller's object and to that object on directive assign a directive's function.

I have created plunker to let you to see: http://plnkr.co/edit/JEb5dzefEgZM5N79kbT5?p=preview

HTML snippet:

<body ng-controller="test">
   <input-test control="customControl"></input-test>
   <button ng-click="customControl.directiveFunction()">PRESS ME</button>
</body>

App.js

var m=angular.module('myApp',[]).controller('test',function($scope){
  $scope.customControl = {
  };
});

m.directive('inputTest', function($window) {
  return {
    restrict: 'E',
    template: '<div>TEST</div>',
    scope: {
      control: '='
    },
    link:function (scope, element, attrs) {
      //here is where we assign to our "control" (passed on directive's declaration) the directive function
      scope.control.directiveFunction = function() {
        $window.alert("CALLED"); 
      }
    }
  };
});

score 1 · Answer 3 · edited May 23 '17 at 11:44

Is there a specific reason behind using directive, not a service, as service would come handy in here.

Well using a service is easy, just see the below example, if this makes sense to you.

var app = angular.module('app', []);

app.service('testService', function(){
    this.testFunc = function () {
        return "Hello";
    };
});

app.controller('appController', function($scope, testService) {
    $scope.valueFromService = testService.testFunc();

});

To see the difference between using a directive vs a factory vs a service, please check out this link:

Difference between service, directive and module

How to call custom directive programmatically in angularjs

3 Answers3