Question

我正在为我的应用创建自定义复选框指令，但是，标签会跳过它。如何强制Tab键停止在我的指令处？

代码:(注意：Plunker现在似乎在fritz上......）

<!DOCTYPE html>
<html>

<head>
</head>

<body>
    <div ng-controller='TestCtrl'>
        <input type='text' />
        <test-checkbox ng-model='isChecked'></test-checkbox>
        <input type='text' />  
    </div>

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>

    <script>
        var app = angular.module("testApp", []);

        app.controller('TestCtrl', ['$scope', function($scope) {
            $scope.isChecked = true;
        }]);

        app.directive('testCheckbox', ['$compile', function ($compile) {
            return {
                restrict: 'E',
                scope: {
                    isChecked: "=ngModel"
                },
                link: function (scope, element) {
                    var html = 
                        "<div class='slgCheckbox' ng-click='onClick(isChecked = !isChecked)'>" +
                        $(element).html() +
                        "<i class='checkboxIcon glyphicon' ng-class='{\"glyphicon-check\" : isChecked === true, \"glyphicon-unchecked\" : isChecked === false }'></i>" +
                        "</div>";

                    var compiledHtml = $compile(html)(scope);
                    $(element).replaceWith(compiledHtml);
                }
            }
        }]);
    </script>
</body>

</html>

Answer 1

您可以将tabindex属性添加到div元素，这将使其可选。

在上面的模板中，您可以执行以下操作：

var html = 
     "<div tabindex='1' class='slgCheckbox' ng-click='onClick(isChecked = !isChecked)'>" +
      $(element).html() +
      "<i class='checkboxIcon glyphicon' ng-class='{\"glyphicon-check\" : isChecked === true, \"glyphicon-unchecked\" : isChecked === false }'></i>" +
       "</div>";

请注意，tabindex属性必须放在div元素上。

认为，这有点简单，有两个原因：

您并不总是希望tabindex为1.它需要相对于页面的其他元素。
仅仅因为它可以被赋予焦点，按空格不会导致调用onclick处理程序。通过使用onkeypress处理程序，您将需要一些自定义逻辑。

您最好的选择是尽可能使用输入元素，以便您可以利用原生选择处理。

有关详细信息，请参阅msdn。

如何在AngularJS指令中强制制表符？

1 个答案: