如何在我的AngularJS指令中强制使用制表符？

问题描述：

我为我的应用程序创建自定义复选框指令，但是，选项卡跳过它。我如何强制Tab键停止在我的指令？如何在我的AngularJS指令中强制使用制表符？

代码：（注：Plunker似乎是弗里茨现在...）

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

请发布您的代码 – 2015-02-08 04:46:06

答

您可以在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元素上。

思想，这是因为两个原因有点简单的回答：

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

最好的办法是尽可能使用输入元素，这样就可以利用本机选择处理。

欲了解更多信息，请参阅msdn。

如何在我的AngularJS指令中强制使用制表符？

相关推荐