AngularJS Passing function with arguments to event directive

Question

To start off, I know there are loads of similar questions but none that I found which supports execution of arbitrary methods with event listeners.

I have this directive which executes functions passed when the window resizes.

app.directive('onResize', function() {
  var directive = {
    'link': function(scope, element, attrs) {
      var onResizeHandler = scope.$eval(attrs.onResize);
      angular.element(window).on('resize', onResizeHandler);
      angular.element(window).on('$destory', function() {element.off();});
    }
  };
  return directive;
});

I can trigger the above directive with

<div data-on-resize="stickyHeader">...</div>

Which runs my method, inside my controller.

app.controller('myController', [$scope, function($scope) {
  $scope.stickyHeader = function() {
    console.log('event triggered') 
  };
}]);

All the above code works fine, but I need to pass some arguments to stickyHeader as in data-on-resize="stickyHeader(arg1, arg2)" When I try that, I get Cannot read property 'call' of undefined at ng (angular.js:3795) in the console. Not sure what I can do to make my directive support arbitrary methods with arguments.

Possible duplicate of Pass argument to directive in angularjs? — Akber Iqbal
– Akber Iqbal, Commented Nov 23, 2018 at 4:34
Neither of the suggested duplicates apply as it is not wise to create event handler directives with isolate scope or interpolation. — georgeawg
– georgeawg, Commented Nov 23, 2018 at 5:04

georgeawg · Accepted Answer · 2018-11-23 09:14:03Z

The directive needs to evaluate the AngularJS expression defined by the on-resize attribute every time the events occurs:

app.directive('onResize', function($window) {
  var directive = {
    link: function(scope, elem, attrs) {
      angular.element($window).on('resize', onResizeHandler);
      scope.$on('$destroy', function() {
         angular.element($window).off('resize', onResizeHandler);
      });
      function onResizeHandler(event) {
         scope.$eval(attrs.onResize, {$event: event});
         scope.$apply();
      }
    }
  };
  return directive;
});

Also since the resize event comes from outside the AngularJS framework, the event needs to be brought into the AngularJS execution context with $apply().

Further, to avoid memory leaks, the event handler needs to be unbound when the scope is destroyed.

Usage:

<div data-on-resize="stickyHeader($event)">...</div>

For more information, see AngularJS Developer Guide - $event.

Collectives™ on Stack Overflow

AngularJS Passing function with arguments to event directive

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related