AngularJS - pass function to directive

Question

I have a example angularJS   lt div ng-controller  testCtrl  gt    lt test color1  color1  updateFn  updateFn    gt  lt  test gt   lt  div gt    lt script gt    angular module  dr        controller  testCtrl   function  scope         scope color1    color        scope updateFn   function             alert  123              directive  test   function         return           restrict   E           scope   color1                       updateFn    amp             template    lt button ng-click  updateFn    gt Click lt  button gt            replace  true          link  function scope  elm  attrs                           lt  script gt   lt  body gt    lt  html gt    I want when I click button  the alert box will appear  but nothing show   Can anyone help me

User · Answer

How about passing the controller function with bidirectional binding? Then you can use it in the directive exactly the same way as in a regular template (I stripped irrelevant parts for simplicity):

<div ng-controller="testCtrl">

   <!-- pass the function with no arguments -->
   <test color1="color1" update-fn="updateFn"></test>
</div>

<script>
   angular.module('dr', [])
   .controller("testCtrl", function($scope) {
      $scope.updateFn = function(msg) {
         alert(msg);
      }
   })
   .directive('test', function() {
      return {
         scope: {
            updateFn: '=' // '=' bidirectional binding
         },
         template: "<button ng-click='updateFn(1337)'>Click</button>"
      }
   });
</script>

I landed at this question, because I tried the method above befire, but somehow it didn't work. Now it works perfectly.

User · Answer

In your  test  directive Html tag  the attribute name of the function should not be camelCased  but dash-based   so - instead of     lt test color1  color1  updateFn  updateFn    gt  lt  test gt    write    lt test color1  color1  update-fn  updateFn    gt  lt  test gt    This is angular s way to tell the difference between directive attributes  such as update-fn function  and functions

User · Answer

use dash and lower case for attribute name   like other answers said        lt test color1  color1  update-fn  updateFn    gt  lt  test gt    And use     instead of   amp   in directive scope    scope    updateFn         Then you can use updateFn like any other function     lt button ng-click  updateFn    gt Click lt  button gt    There you go

User · Answer

Perhaps I am missing something  but although the other solutions do call the parent scope function there is no ability to pass arguments from directive code  this is because the update-fn is calling updateFn   with fixed parameters  in for example  msg   Hello World     A slight change allows the directive to pass arguments  which I would think is far more useful    lt test color1  color1  update-fn  updateFn  gt  lt  test gt    Note the HTML is passing a function reference  i e   without    brackets   JS  var app   angular module  dr         app controller  testCtrl   function  scope         scope color1    color        scope updateFn   function msg                    alert msg              app directive  test   function         return           restrict   E           scope                color1                   updateFn    amp                         object is passed while making the call         template    lt button ng-click  callUpdate    gt              Click lt  button gt            replace  true                  link  function scope  elm  attrs                     scope callUpdate   function                 scope updateFn    Directive Args                                      So in the above  the HTML is calling local scope callUpdate function  which then  fetches  the updateFn from the parent scope and calls the returned function with parameters that the directive can generate   http   jsfiddle net mygknek2

User · Answer

JorgeGRC Thanks for your answer  One thing though  the  maybe  part is very important  If you do have parameter s   you must include it them on your template as well and be sure to specify your locals e g  updateFn  msg   Directive Args

User · Answer

I had to use the     binding instead of   amp   because that was not working  Strange behavior

User · Answer

To call a controller function in parent scope from inside an isolate scope directive  use dash-separated attribute names in the HTML like the OP said    Also if you want to send a parameter to your function  call the function by passing an object    lt test color1  color1  update-fn  updateFn msg   gt  lt  test gt    JS  var app   angular module  dr         app controller  testCtrl   function  scope         scope color1    color        scope updateFn   function msg                    alert msg              app directive  test   function         return           restrict   E           scope                color1                   updateFn    amp                         object is passed while making the call         template    lt button ng-click  updateFn  msg     Hello World       gt              Click lt  button gt            replace  true                  link  function scope  elm  attrs                                       Fiddle

[angularjs] AngularJS - pass function to directive

Examples related to angularjs