如何使用angularjs在局部视图中设置自动对焦？

Question

如何使用angularjs在局部视图中设置自动对焦？

Nin*_*nja 4 angularjs angularjs-directive angularjs-ng-repeat

在我的项目中我更多地使用部分页面.我无法在文本框控件上设置自动对焦,而它在普通页面中工作.

这是我的部分页面视图:

<body ng-app="app" ng-controller="myCtrl">

        <section>
             <input type="text" focus-me/>
             <input type="text" />
                 <a ng-click="show()">click</a>
            <section>
        <section ng-show="show">
            <input type="text" focus-me/>
            </section>
    </body>

Run Code Online (Sandbox Code Playgroud)

这是我的js:

var app = angular.module("app", []);
app.controller('myCtrl', function($scope) {
}); 
 $scope.show = false;

$scope.show = function() {
    $scope.show = true;
};
angular.module('ng').directive('focusMe', function($timeout) {
    return {
        link: function ( scope, element, attrs ) {
                    $timeout( function () { element[0].focus(); } );
                }


    };
});

Run Code Online (Sandbox Code Playgroud)

1)焦点 - 我在html的第一部分工作但不在第二部分工作,因为它通过ng-show作为局部视图显示.2)当我使用ng-repeat时,焦点转到最后一项,但它需要在第一项中设置.

有谁可以帮我解决这两个问题？

Answer 1

Jos*_*seM 7

你的第一个问题是因为虽然ng-show控制你是否可以在视图中看到 dom元素,但它实际上是在dom中,因此你的指令将在放入dom时运行.如果您使用ng-if它,那么它将按预期工作.

第二个问题实际上是按设计工作的.你的指令调用立即超时来关注元素,它们都在ng-repeat中工作.它关注最后一个的原因是因为这是发出超时焦点事件的最后一个.

如果只希望聚焦列表中的第一个,那么可以使用该$first变量使指令仅对列表中的第一个元素起作用.

以下是一个工作示例:http://plnkr.co/edit/1GbvaB？p = preview

归档时间：	11 年，3 月前
查看次数：	3684 次
最近记录：	11 年，3 月前