监听事件的指令答案

【问题标题】：Directive to listen on event监听事件的指令
【发布时间】：2015-05-21 19:16:11
【问题描述】：

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

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

想法？

【问题讨论】：

将业务逻辑放在视图逻辑中，真的，真的不是一个好主意。这属于服务或您的控制器。你真的无能为力。使用这两个选项中的一项服务，您可以更轻松地管理它。
我不会将此作为业务逻辑。基本上，当我的（混合）应用程序从 iOS/Android 上的后台状态恢复时，我试图简单地刷新我的控制器。
这不是视图逻辑。它属于一项服务。想象一下其他人进入这个代码库并试图找到处理这个的代码，它最终成为某个随机 HTML 标记上的一个属性。
你能举一个例子来说明你将如何使用服务做到这一点吗？
之前回答过类似的问题：stackoverflow.com/questions/30325030/…

标签： javascript angularjs angularjs-directive dom-events

【解决方案1】：

使用隔离作用域，您可以传入具有单向数据绑定的函数。假设 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();
        });
      });
    }
  };
});

【讨论】：