【问题标题】：Convert jquery click function into angularJS directive将 jquery click 函数转换为 angularJS 指令
【发布时间】：2016-04-26 17:40:16
【问题描述】：

对于“跳转到内容”可访问性链接，控制器中的这个 jquery 运行良好：

  $scope.skipLink = $( document ).ready(function() {
     $(".skip").click(function(event){
       var skipTo="#"+this.href.split('#')[1];
     $(skipTo).attr('tabindex', -1).on('blur focusout', function () { 
       $(this).removeAttr('tabindex'); 
       }).focus();
     });
   });

HTML 在哪里

    <a href="#content" class="skip sr-only sr-only-focusable">Skip to content</a>

有没有办法在不使用 jquery 的情况下将其重写为指令？

【问题讨论】：

这当然可以重写为对角度更友好，但我不确定你为什么要在没有 jQuery 的情况下这样做。如果没有它，这将是一个相当笨拙的解决方案。
@mhodges 我同意，我被要求让它对角度更友好，但我运气不佳。 jqLite 可能没问题。至少让它成为一个指令而不是控制器中的范围不是一个好主意吗？
是的，我可以发布一个答案，举例说明如何稍微清理一下。我不得不问，您是否有多个“跳到内容”链接和多个可以跳到的内容部分？
@mhodges 目前没有。我不认为会有，但如果他们最终创建了一个备用标题视图，我们可能不得不再次使用它

标签： jquery angularjs angularjs-directive jquery-selectors accessibility

【解决方案1】：

在我看来，我认为这不应该在没有 jQuery 的情况下完成。但是，为了使其对角度更友好，请参阅THIS DEMO。

这个想法是利用 Angular 中的点击处理程序指令，让 jQuery 在你的控制器内部完成它的工作。

AngularJS 控制器

  $scope.skipToContent = function () {
    $("#content").attr('tabindex', -1);
  };
  $scope.removeTabIndex = function () {
    $("#content").removeAttr('tabindex'); 
  };

HTML

<a href="#content" 
   ng-click="skipToContent()"
   class="skip sr-only sr-only-focusable">Skip to content</a>
<input id="content" 
       ng-blur="removeTabIndex()"
       style="display: block; margin-top:100vh;"/>

【讨论】：

谢谢！只是出于好奇，这是否应该是控制器而不是指令？（我是 angularjs 的新手，如果你不知道的话）
@gallagher 不是真的，除了它是一个孤立的案例之外，因此为单一用途构建一个自定义指令有点矫枉过正。而且您正在使用指令，仅供参考，这就是 ng-* 属性。它们只是 Angular 库中预定义的内置指令。

【解决方案2】：

最简单的方法是通过在内容 div 上设置属性 tabindex 来完全不使用 javascript。

<a href="#content" class="skip">Skip to content</a>

<div id="content" tabindex="-1" onclick="return false">
   This is my content
</div>

请注意，不应为所有用户隐藏“跳转到内容”链接，因为非视力障碍者（键盘用户、帕金森病等）也可以使用它。

【讨论】：