javascript - 监听事件的指令

Question

我注意到我在很多 Controller 上添加了一些代码来监听事件并执行某些操作。差不多是这样:

  document.addEventListener("resume", function(e){
    $scope.doSomething();
  }, false);

我意识到到处使用相同的代码并不干净，唯一改变的是$scope.doSomething()。

我想将其添加为指令，这样我就可以得到类似的内容:

<div on-resume="doSomething()">
</div>

我尝试过这个(但它不起作用):

.directive('onResume', function(){ 
   return {
      restrict: 'A'
      link: function(scope, elem, attr, ctrl) {
         elem.bind('resume', function(e) {
            fnName = attributes["onResume"];
            scope.$apply(function(){ 
              scope[fnName]();
            };
         });
      }
   };
});

想法？

Answer 1

使用隔离作用域，您可以通过单向数据绑定(bind)传入函数。假设 doSomething 被定义为父作用域上的函数，这将适用于您包含的 HTML。

.directive('onResume', function() {
  return {
    restrict: 'A',
    scope: {
      onResume: '&'
    },
    link: function(scope, elem, attr, ctrl) {
      elem.bind('resume', function(e) {
        scope.$apply(function() {
          scope.onResume();
        });
      });
    }
  };
});