Question

我在multiple指令中有三行类似的代码，实际上是将一个事件处理程序绑定到“焦点”。

var ele = $(event.target);
$($(event.target)).attr('tabindex', -1);
$(ele).trigger('focus');

这是创建代码重复问题，创建服务或工厂方法不正确，因为我正在处理DOM操作。

有什么方法可以让我可以创建常用方法并传递我的目标并运行上面的代码以避免代码重复。

Answer 1

通常在某些组件中进行代码重复，比如控制器/链接功能，这不是一个坏主意，因为这可以帮助您使每个组件独立...当您使用DOM部件时这是必要的，否则您将得到不可测试的代码！

如果你需要分享行为...... Angular有一个指令概念，所以你可以做你需要的角度建议：

angular
  .module('test', [])
  .directive('scaleTabindex', function() {
    
    return function ScaleTabindexPostLink(iScope, iElement, iAttributes) {
    
      function scaleTabindex(event) {
        var index = Number(iElement.attr('tabindex'));
        
        return iElement.attr('tabindex', index - 1);
      }
      
      iElement.bind('focus', scaleTabindex);
    };
  })
;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<article ng-app="test">
  <button tabindex="100" scale-tabindex>Button 1</button>
  <button tabindex="100" scale-tabindex>Button 2</button>
  <button tabindex="100" scale-tabindex>Button 3</button>
</article>

如何在Angularjs

1 个答案: