caoruiy‘s blog

Wisdom outweighs any wealth

[ui-bootstrap源码解析系列01]-tabindex模块

概述

tabindex模块的主要功能是为元素设置 tabindex 属性。他是一个基础模块。

其源码可以在:github仓库中:bootstrap/src/tabindex/ 查看

tabindex模块估计应该是整个项目所有模块中最简单的,所有源码参见如下:

angular.module('ui.bootstrap.tabindex', [])

.directive('uibTabindexToggle', function() {
  return {
    restrict: 'A',
    link: function(scope, elem, attrs) {
      attrs.$observe('disabled', function(disabled) {
        attrs.$set('tabindex', disabled ? -1 : null);
      });
    }
  };
});

该模块只实现了一个指令:uibTabindexToggle指令

uibTabindexToggle指令

该指令主要是位元素设置 tabindex 属性,tabindex 实际上是用来设置元素是否可以接受焦点和参与键盘导航的顺序,也就是当我们在键盘上按 tab 键时,会根据 tabindex 的值,进行导航。

如果你不清楚该属性的作用,可以参照文章:HTML-tabindex属性


我们知道,指令的link函数用来负责注册DOM监听器以及更新DOM。

所以指令对元素的属性 disabled 进行额观察,当发现元素属性变化时,根据元素 disabled 的值为元素设置 tabindex 属性值。

如果元素 disabled==true 设置 tabindex = -1 ,否则设置 tabindex = null

指令的attribute对象的 $observe 方法是对元素的属性值的变化进行监听。

如果你对指令的 attribute属性对象 这一部分的 不是很舒心,可以参阅angular官方文档:$compile.directive.Attributes

用法
<a tabindex="0" ng-disabled="isDisabled" uib-tabindex-toggle> 你好,我是一个a元素</a>
$scope.isDisabled = true;
$timeout(function(){
    $scope.isDisabled = false;
    console.log('set disabled')
},5000)

开始时,元素会被解析成:

<a tabindex="-1" ng-disabled="isDisabled" uib-tabindex-toggle="" disabled="disabled">你好,我是一个a元素</a>

5秒之后,取消设置:

<a ng-disabled="isDisabled" uib-tabindex-toggle="">你好,我是一个a元素</a>
点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注