CODEWITHSUNDEEP
javascriptangularjsangularjs-directive
Muhammad Nasir
Muhammad Nasir

Reputation: 2204

How to call custom directive programmatically in angularjs

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() {});

Upvotes: 1

Views: 4364

Answers (3)

MaK
MaK

Reputation: 110

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

Upvotes: 1

Vasyl
Vasyl

Reputation: 1423

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() {
        ...
      };
    }
  };
});

Upvotes: 3

JavierFromMadrid
JavierFromMadrid

Reputation: 621

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"); 
      }
    }
  };
});

Upvotes: 1

Related Questions