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

以上所有代码都可以正常工作，但是我需要像在stickyHeader中那样向data-on-resize="stickyHeader(arg1, arg2)"传递一些参数，当我尝试这样做时，我会在控制台中得到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。

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

1 个答案: