如何在我的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 Scottie

請發佈您的代碼 – 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。

來源

2015-02-08 05:03:43

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

回答

相關問題