将 jquery click 函数转换为 angularJS 指令

Question

对于 'skip to content' 可访问性 link，控制器中的这个 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 的情况下将其重写为指令？

Answer 1

在我看来，如果没有 jQuery，我不认为应该这样做。但是，为了使其更加 angular 友好，请参阅 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;"/>

Answer 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>

请注意，"skip to content" link 不应为所有用户隐藏，因为它可供非视力障碍者（键盘用户、帕金森病等）使用。

将 jquery click 函数转换为 angularJS 指令

Convert jquery click function into angularJS directive

jquery

accessibility

jquery-selectors

angularjs

angularjs-directive

AngularJS 控制器

HTML