AngularJS Directive Callback

Question

I would like to send a call back into a directive via a parameter on the tag, and then call that method when appropriate inside the directive. For example, when a button was clicked call a method on the parent controller.

I have a simple plunker of it not working

html file:

<body ng-controller="ParentController">
    <h1> Method Arguments </h1>
    <h3> open console to view output</h3>
    <hello-world onLoadCallback="myCallback(arg1)"></hello-world>
</body>

javascript file:

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

function ParentController($scope) {
  $scope.myCallback = function(var1){
    console.log("myCallback", var1);
  }
}
app.directive('helloWorld', function() {
  return {
      restrict: 'AE',
      template: '<h3>Hello World!!</h3>',
      scope:{
            onLoadCallback: '&'
        },
        link: function(scope, element, attrs, dateTimeController) {
            console.log('linked directive, not calling callback')
            scope.onLoadCallback('wtf');

      }
  };
});

nakkor · Accepted Answer · 2014-07-08 19:37:53Z

43

Tricky tricky angular, when declaring the argument in the HTML, it needs to use snake case, instead of camelcase to match.

Works:

<hello-world on-load-callback="myCallback(arg1)"></hello-world>

Doesn't Work:

<hello-world onLoadCallback="myCallback(arg1)"></hello-world>

answered Jul 8, 2014 at 19:37

nakkor

8951 gold badge8 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Hassan Faghihi Over a year ago

html is not aware of cases, so it doesn't know if it is onloadcallback or if it is onLoadCallback. also browser some time do some case/element modification, that's why angular and even JS, for example elem.dataSet, translate camel case to -

Ron Harlev Over a year ago

Some interesting details about calling a callback function from directives tech.europace.de/passing-functions-to-angularjs-directives

user1338062 · Accepted Answer · 2015-03-04 09:25:54Z

28

Also the callback needs to be:

scope.onLoadCallback({arg1: 'wtf'});

The named parameters are then bound to the corresponding parameters used in the callback attribute (not all need to be used).

edited Mar 4, 2015 at 9:25

answered Mar 4, 2015 at 8:26

user1338062

13k4 gold badges77 silver badges67 bronze badges

3 Comments

callmekatootie Over a year ago

This answer has been flagged as low quality and is up for review. Might I request you to kindly improve the answer by describing why the code needs to be changed to the one that you have proposed - perhaps you can provide a link to the documentation AND a short description about why you need to explicitly mention the parameter

user1338062 Over a year ago

@callmekatootie Unfortunately the official documentation is very lightweight on this (as is usual for angular). I added a short sentence to explain the syntax.

asulaiman Over a year ago

Can confirm that this the paramater syntax is correct if you are trying to pass more than one paramater to your callback. If you dont use this syntax, angular fails to map both parameters to the callback.

Collectives™ on Stack Overflow

AngularJS Directive Callback

2 Answers 2

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related