Question

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

这是我的部分页面视图：

<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时，焦点转到最后一项，但需要在第一项中设置。

任何人都可以帮我解决这两个问题吗？

Answer 1

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

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

如果您只希望聚焦列表中的第一个，那么可以使用$first变量使指令仅适用于列表中的第一个元素。

以下是工作示例：http://plnkr.co/edit/1GbvaB?p=preview

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

1 个答案: