AngularJS将带有参数的函数传递给事件指令

Question

首先，我知道有很多类似的问题，但我发现没有一个支持使用事件侦听器执行任意方法。

我有这个指令，它执行窗口调整大小时传递的函数。

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

我可以用

触发上述指令

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

在我的控制器内部运行我的方法。

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

以上所有代码都可以正常工作，但我需要像data-on-resize="stickyHeader(arg1, arg2)" 一样将一些参数传递给stickyHeader。当我尝试这样做时，我会在控制台中得到Cannot read property 'call' of undefined at ng (angular.js:3795)。不确定我可以做些什么来使我的指令支持带有参数的任意方法。

Answer 1

指令需要在每次事件发生时评估on-resize属性定义的AngularJS表达式：

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

此外，由于resize 事件来自AngularJS 框架之外，因此需要使用$apply() 将事件带入AngularJS 执行上下文。

此外，为了避免内存泄漏，当作用域被销毁时，事件处理程序需要解除绑定。

用法：

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

有关详细信息，请参阅AngularJS Developer Guide - $event。