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

发布时间：2020-12-17 17:20:31 所属栏目：安全来源：网络整理

导读：在我的项目中我更多地使用部分页面.我无法在文本框控件上设置自动对焦,而它在普通页面中工作. 这是我的部分页面视图： body ng-app="app" ng-controller="myCtrl" section input type="text" focus-me/ input type="text" / a ng-click="show()"click/a sect

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

这是我的部分页面视图：

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

这是我的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(); } );
                }


    };
});

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

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

解决方法

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

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

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

这是一个工作样本：http://plnkr.co/edit/1GbvaB?p=preview

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!