Question

我想触发一个按钮来显示输入栏，然后专注于它。为了避免复杂化，我找到了这个简单的指令来进行聚焦。

app.directive('autoFocus', function($timeout) {
    return {
        restrict: 'AC',
        link: function(_scope, _element) {
            $timeout(function(){
                _element[0].focus();
            }, 0);
        }
    };
});

<input auto-focus type="text"/>

但现在我不知道如何在它出现时使用它。

Answer 1

在输入上使用ng-if可以解决您的问题。因为如果您使用ng-show，则表示该元素仍然是页面的一部分但不可见。但ng-if在条件成立时生成新元素。运行代码段并自行检查。

var app = angular.module("myApp",[]);
app.directive('autoFocus', function($timeout) {
    return {
        restrict: 'AC',
        link: function(_scope, _element) {
            $timeout(function(){
                _element[0].focus();
            }, 0);
        }
    };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<button ng-click="showInput = true;" >Show Input</button>
<button ng-click="showInput = false;" >Hide Input</button>  
<input auto-focus type="text" ng-if="showInput">
</div>

这样当按钮输入出现时，您可以通过键入来查看它是否专注于此引用ngif documentation

ngIf指令删除或重新创建DOM树的一部分基于{表达式}。如果分配给ngIf的表达式求值如果为false，则从DOM中删除该元素，否则为a 将元素的克隆重新插入DOM。

使用ng-if使用指令？

1 个答案: