gpt4 book ai didi

angularjs - 如何使用 angularjs 在部分 View 中设置自动对焦?

转载 作者:行者123 更新时间:2023-12-02 23:30:21 28 4
gpt4 key购买 nike

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

这是我的部分页面 View :

<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) focus-me 在 html 的第一部分起作用,但在第二部分不起作用,因为它通过 ng-show 显示为部分 View 。2)当我使用 ng-repeat 时,焦点转到最后一个项目,但它需要在第一个项目中设置。

谁能帮我解决这两个问题吗?

最佳答案

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

第二个问题实际上正在按设计进行。您的指令会立即调用超时来关注该元素,并且它们都在 ng-repeat 中工作。它之所以关注最后一个,是因为它是最后一个发出超时焦点事件的。

如果您只想关注列表中的第一个元素,则可以使用 $first 变量让指令仅作用于列表中的第一个元素。

这是一个工作示例:http://plnkr.co/edit/1GbvaB?p=preview

关于angularjs - 如何使用 angularjs 在部分 View 中设置自动对焦?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25807236/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com