AngularJS控制器

Question

对于“跳到内容”辅助功能链接，控制器中的此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的情况下完成。但是，为了使其更具角度友好性，请参阅THIS DEMO。

我们的想法是利用angular中的click处理程序指令，让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>

请注意，不应为所有用户隐藏“跳至内容”链接，因为非视障人士（键盘用户，帕金森病，......）可以使用该链接。

将jquery click函数转换为angularJS指令

2 个答案:

AngularJS控制器

HTML