Question

我的span标记的结构如下，

    <a href="#"> </a>
    <span  class="spanclass" ng-click="clickfunction()">

    </span>

据说我们需要将 tabindex = -1 添加到范围
然后设置焦点到 span元素。

最初我觉得像锚模板的ng-blur一样，我可以调用一个函数来设置焦点如下

    $('.spanclass').attr("tabIndex", -1).focus();

然后我能够专注于它然而，当我按下输入ng-click没有被调用，如果我通过直接点击发生这种情况。此时我混合了角度js和jquery，这可能是不正确的。

我是否知道如何使用角度js以及在什么事件上实现上述两个步骤。

谢谢，巴拉吉

Answer 1

将跨度更改为按钮会更加语义（您仍可以按照自己的意愿设置样式）

    ...
    <style>
        .span {
            border: none;
            background: none;
        }
    </style>
</head>
<body ng-app="app">
    <div ng-controller="ctrlr">
        <a href="#" tabindex="2">First</a>
        <button class="span" ng-click="clickfunction()" tabindex="1">
            Second
        </button>
    </div>

    <script>
        angular.module('app', []);
        angular.module('app').controller('ctrlr', function ($scope) {
            $scope.clickfunction = function () {
                alert('a')
            }
        });
    </script>
</body>

        angular.module('app', []);
        angular.module('app').controller('ctrlr', function ($scope) {
            $scope.clickfunction = function () {
                alert('a')
            }
        });

        .span {
            border: none;
            background: none;
        }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app">
    <div ng-controller="ctrlr">
        <a href="#" tabindex="2">First</a>
        <button class="span" ng-click="clickfunction()" tabindex="1">
            Second
        </button>
    </div>
</div>

Answer 2

如其他答案中所述，更改为按钮最有意义。

如果你必须使用span元素，那么你可以添加一个指令来对Enter keypress执行一个函数，如下所示：How to use a keypress event in AngularJS?

<强>使用Javascript：

app.directive('ngEnter', function () {
    return function (scope, element, attrs) {
        element.bind("keydown keypress", function (event) {
            if(event.which === 13) {
                scope.$apply(function (){
                    scope.$eval(attrs.ngEnter);
                });

                event.preventDefault();
            }
        });
    };
});

<强> HTML：

<div ng-app="" ng-controller="MainCtrl">
    <input type="text" ng-enter="doSomething()">    
</div>

Answer 3

虽然@mofojed的上述答案已被接受。但是这里有一些更明确的说明将使这篇文章完整。

您可以将焦点设置在可聚焦的HTML元素上，其中包括锚标记，HTML输入，选择，文本区域，按钮，任何嵌入元素以及带有tabindex的任何元素

请注意，如果要通过添加tabindex来关注范围，则tabindex不应为-1。使tabindex为正数。

使用角度js将焦点设置在选项卡上的跨度上

3 个答案: