How to call a method defined in an AngularJS directive

Question

I have a directive  here is the code      directive  map   function         return           restrict   E           replace  true          template    lt div gt  lt  div gt            link  function  scope  element  attrs                 var center   new google maps LatLng 50 1  14 4                 scope map options                     zoom  14                  center  center                  mapTypeId  google maps MapTypeId ROADMAP                               create map             var map   new google maps Map document getElementById attrs id    scope map options               var dirService  new google maps DirectionsService                var dirRenderer  new google maps DirectionsRenderer                var showDirections   function dirResult  dirStatus                    if  dirStatus    google maps DirectionsStatus OK                        alert  Directions failed      dirStatus                       return                                           Show directions                 dirRenderer setMap map                      scope dirRenderer setPanel Demo dirContainer                   dirRenderer setDirections dirResult                                  Watch             var updateMap   function                    dirService route  scope dirRequest  showDirections                                    scope  watch  dirRequest origin   updateMap                google maps event addListener map   zoom changed   function                      scope map options zoom   map getZoom                                   dirService route  scope dirRequest  showDirections                          I would like to call updateMap   on a user action  The action button is not on the directive    What is the best way to call updateMap   from a controller

User · Answer

You can specify a DOM attribute that can be used to allow the directive to define a function on the parent scope. The parent scope can then call this method like any other. Here's a plunker. And below is the relevant code.

clearfn is an attribute on the directive element into which the parent scope can pass a scope property which the directive can then set to a function that accomplish's the desired behavior.

<!DOCTYPE html>
<html ng-app="myapp">
  <head>
    <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <style>
      my-box{
        display:block;
        border:solid 1px #aaa;
        min-width:50px;
        min-height:50px;
        padding:.5em;
        margin:1em;
        outline:0px;
        box-shadow:inset 0px 0px .4em #aaa;
      }
    </style>
  </head>
  <body ng-controller="mycontroller">
    <h1>Call method on directive</h1>
    <button ng-click="clear()">Clear</button>
    <my-box clearfn="clear" contentEditable=true></my-box>
    <script>
      var app = angular.module('myapp', []);
      app.controller('mycontroller', function($scope){
      });
      app.directive('myBox', function(){
        return {
          restrict: 'E',
          scope: {
            clearFn: '=clearfn'
          },
          template: '',
          link: function(scope, element, attrs){
            element.html('Hello World!');
            scope.clearFn = function(){
              element.html('');
            };
          }
        }
      });
    </script>
  </body>
</html>

User · Answer

Assuming that the action button uses the same controller  scope as the directive  just define function updateMap on  scope inside the link function   Your controller can then call that function when the action button is clicked    lt div ng-controller  MyCtrl  gt       lt map gt  lt  map gt       lt button ng-click  updateMap    gt call updateMap   lt  button gt   lt  div gt    app directive  map   function         return           restrict   E           replace  true          template    lt div gt  lt  div gt            link  function  scope  element  attrs                 scope updateMap   function                     alert  inside updateMap                                          fiddle    As per  FlorianF s comment  if the directive uses an isolated scope  things are more complicated   Here s one way to make it work  add a set-fn attribute to the map directive which will register the directive function with the controller    lt map set-fn  setDirectiveFn theDirFn   gt  lt  map gt   lt button ng-click  directiveFn    gt call directive function lt  button gt    scope    setFn    amp      link  function scope  element  attrs        scope updateMap   function            alert  inside updateMap                scope setFn  theDirFn  scope updateMap        function MyCtrl  scope         scope setDirectiveFn   function directiveFn             scope directiveFn   directiveFn             fiddle

User · Answer

You can tell the method name to directive to define which you want to call from controller but without isolate scope    x000D   x000D  angular module  app       x000D     directive  palyer     x000D      function     x000D        return   x000D          restrict   A   x000D          template   lt div class  player  gt  lt span ng-bind  text  gt  lt  span gt  lt  div gt    x000D          link  function  scope  element  attr    x000D            if  attr toPlay    x000D               scope attr toPlay    function name    x000D                 scope text   name     playing      x000D                x000D              x000D            x000D           x000D        x000D       x000D     controller  playerController      scope   x000D      function  scope    x000D         scope clickPlay   function     x000D           scope play  AR Song    x000D           x000D        x000D        x000D   player  x000D    border 1px solid  x000D    padding  10px  x000D    x000D   lt script src  https   ajax googleapis com ajax libs angularjs 1 2 23 angular min js  gt  lt  script gt  x000D   lt div ng-app  app  gt  x000D     lt div ng-controller  playerController  gt  x000D       lt p gt Click play button to play x000D         lt p gt  x000D           lt p palyer    to-play  play  gt  lt  p gt  x000D           lt button ng-click  clickPlay    gt Play lt  button gt  x000D   x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

To be honest  I was not really convinced with any of the answers in this thread  So  here s are my solutions   Directive Handler Manager  Approach  This method is agnostic to whether the directive s  scope is a shared one or isolated one  A factory to register the directive instances  angular module  myModule   factory  MyDirectiveHandler   function         var instance map           var service             registerDirective  registerDirective          getDirective  getDirective          deregisterDirective  deregisterDirective             return service       function registerDirective name  ctrl            instance map name    ctrl             function getDirective name            return instance map name              function deregisterDirective name            instance map name    null              The directive code  I usually put all the logic that doesn t deal with DOM inside directive controller  And registering the controller instance inside our handler  angular module  myModule   directive  myDirective   function MyDirectiveHandler        var directive             link  link          controller  controller             return directive       function link               link fn code            function controller  scope   attrs            var name    attrs name           this updateMap   function                   some code                     MyDirectiveHandler registerDirective name  this             scope  on  destroy   function                 MyDirectiveHandler deregisterDirective name                          template code   lt div my-directive name  foo  gt  lt  div gt    Access the controller instance using the factory  amp  run the publicly exposed methods  angular module  myModule   controller  MyController   function MyDirectiveHandler   scope         scope someFn   function             MyDirectiveHandler get  foo   updateMap                 Angular s approach  Taking a leaf out of angular s book on how they deal with   lt form name  my form  gt  lt  form gt    using  parse and registering controller on  parent scope  This technique doesn t work on isolated  scope directives    angular module  myModule   directive  myDirective   function  parse        var directive             link  link          controller  controller          scope  true             return directive       function link               link fn code            function controller  scope   attrs             parse  attrs name  assign  scope  parent  this            this updateMap   function                   some code                       Access it inside controller using  scope foo  angular module  myModule   controller  MyController   function  scope         scope someFn   function              scope foo updateMap

User · Answer

Below solution will be useful when  you are having controllers  both parent and directive  isolated   in  controller As  format  someone might find this useful   directive    var directive             link  link          restrict   E           replace  true          scope                clearFilters                         templateUrl    temp html           bindToController  true           controller  ProjectCustomAttributesController          controllerAs   vmd             return directive       function link scope  element  attrs            scope vmd clearFilters   scope vmd SetFitlersToDefaultValue            directive Controller     function DirectiveController  location  dbConnection  uiUtility      vmd SetFitlersToDefaultValue   SetFitlersToDefaultValue   function SetFitlersToDefaultValue                  your logic               html code            lt Test-directive clear-filters  vm ClearFilters  gt  lt  Test-directive gt       lt a class  pull-right  style  cursor  pointer  ng-click  vm ClearFilters    gt  lt u gt Clear lt  u gt  lt  a gt     this button is from parent controller which will call directive controller function

User · Answer

TESTED Hope this helps someone   My simple approach  Think tags as your original code    lt html gt   lt div ng-click  myfuncion  gt    lt my-dir callfunction  myfunction  gt   lt  html gt    lt directive  my-dir  gt  callfunction   callfunction  link   function scope element attr    scope callfunction   function          your code      lt  directive gt

User · Answer

Just use scope  parent to associate function called to directive function  angular module  myApp        controller  MyCtrl     scope  function  scope          directive  mydirective  function     function link scope  el  attr        use scope  parent to associate the function called to directive function    scope  parent myfunction   function directivefunction parameter          do something     return           link  link          restrict   E                    in HTML   lt div ng-controller  MyCtrl  gt       lt mydirective gt  lt  mydirective gt       lt button ng-click  myfunction parameter   gt call   lt  button gt   lt  div gt

User · Answer

If you want to use isolated scopes you can pass a control object using bi-directional binding   of a variable from the controller scope  You can also control also several instances of the same directive on a page with the same control object    x000D   x000D  angular module  directiveControlDemo       x000D   x000D   controller  MainCtrl   function  scope    x000D     scope focusinControl       x000D     x000D   x000D   directive  focusin   function factory     x000D    return   x000D      restrict   E   x000D      replace  true  x000D      template    lt div gt A   internalControl   lt  div gt    x000D      scope    x000D        control      x000D         x000D      link  function scope  element  attrs    x000D        scope internalControl   scope control        x000D        scope internalControl takenTablets   0  x000D        scope internalControl takeTablet   function     x000D          scope internalControl takenTablets    1  x000D          x000D        x000D       x000D      x000D   lt script src  https   ajax googleapis com ajax libs angularjs 1 2 23 angular min js  gt  lt  script gt  x000D   lt div ng-app  directiveControlDemo  gt  x000D     lt div ng-controller  MainCtrl  gt  x000D       lt button ng-click  focusinControl takeTablet    gt Call directive function lt  button gt  x000D       lt p gt  x000D         lt b gt In controller scope  lt  b gt  x000D          focusinControl   x000D       lt  p gt  x000D       lt p gt  x000D         lt b gt In directive scope  lt  b gt  x000D         lt focusin control  focusinControl  gt  lt  focusin gt  x000D       lt  p gt  x000D       lt p gt  x000D         lt b gt Without control object  lt  b gt  x000D         lt focusin gt  lt  focusin gt  x000D       lt  p gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Although it might be tempting to expose an object on the isolated scope of a directive to facilitate communicating with it  doing can lead to confusing  spaghetti  code  especially if you need to chain this communication through a couple levels  controller  to directive  to nested directive  etc     We originally went down this path but after some more research found that it made more sense and resulted in both more maintainable and readable code to expose events and properties that a directive will use for communication via a service then using  watch on that service s properties in the directive or any other controls that would need to react to those changes for communication   This abstraction works very nicely with AngularJS s dependency injection framework as you can inject the service into any items that need to react to those events  If you look at the Angular js file  you ll see that the directives in there also use services and  watch in this manner  they don t expose events over the isolated scope   Lastly  in the case that you need to communicate between directives that are dependent on one another  I would recommend sharing a controller between those directives as the means of communication   AngularJS s Wiki for Best Practices also mentions this      Only use   broadcast      emit   and   on   for atomic events   Events that are relevant globally across the entire app  such as a user authenticating or the app closing   If you want events specific to modules  services or widgets you should consider Services  Directive Controllers  or 3rd Party Libs          scope  watch   should replace the need for events   Injecting services and calling methods directly is also useful for direct communication   Directives are able to directly communicate with each other through directive-controllers

User · Answer

A bit late  but this is a solution with the isolated scope and  events  to call a function in the directive  This solution is inspired by this SO post by satchmorun and adds a module and an API     Create module var MapModule   angular module  MapModule           Load dependency dynamically angular module  app   requires push  MapModule      Create an API to communicate with the directive  The addUpdateEvent adds an event to the event array and updateMap calls every event function   MapModule factory  MapApi   function          return           events               addUpdateEvent  function  func                this events push func                       updateMap  function                  this events forEach function  func                    func call                                           Maybe you have to add functionality to remove event    In the directive set a reference to the MapAPI and add  scope updateMap as an event when MapApi updateMap is called   app directive  map   function          return           restrict   E            scope               templateUrl                  controller  function   scope   http   attrs  MapApi                  scope api   MapApi                scope updateMap   function                        Update the map                                Add event              scope api addUpdateEvent  scope updateMap                          In the  main  controller add a reference to the MapApi and just call MapApi updateMap   to update the map   app controller  mainController   function   scope  MapApi          scope updateMapButtonClick   function             MapApi updateMap

User · Answer

Building on Oliver s answer - you might not always need to access a directive s inner methods  and in those cases you probably don t want to have to create a blank object and add a control attr to the directive just to prevent it from throwing an error  cannot set property  takeTablet  of undefined       You also might want to use the method in other places within the directive   I would add a check to make sure scope control exists  and set methods to it in a similar fashion to the revealing module pattern  app directive  focusin   function factory       return       restrict   E       replace  true      template    lt div gt A   control   lt  div gt        scope          control                 link   function  scope  element  attrs          var takenTablets   0        var takeTablet   function             takenTablets    1                   if  scope control            scope control               takeTablet  takeTablet

User · Answer

How to get a directive s controller in a page controller    write a custom directive to get the reference to the directive controller from the DOM element     angular module  myApp        directive  controller   controller    controller  inject      parse     function controller  parse        var directive             restrict   A           link  linkFunction            return directive       function linkFunction scope  el  attrs            var directiveName   attrs  normalize el prop  tagName   toLowerCase             var directiveController   el controller directiveName            var model    parse attrs controller           model assign scope  directiveController            use it in the page controller s html    lt my-directive controller  vm myDirectiveController  gt  lt  my-directive gt   Use the directive controller in the page controller   vm myDirectiveController callSomeMethod       Note  the given solution works only for element directives  controllers  tag name is used to get the name of the wanted directive

User · Answer

Maybe this is not the best choice  but you can do angular element   element   isolateScope   or     element   isolateScope   to access the scope and or the controller of your directive

[angularjs] How to call a method defined in an AngularJS directive?

Examples related to angularjs

Examples related to angularjs-directive