Question

我需要<div>，文本<input>可以切换为可见，然后专注于文本元素。

按下按钮将两个条件设置为true，一个用于显示父元素，另一个用于聚焦输入元素。

我正在使用两个自定义指令：

ng-visible 指令在评估为真实时切换可见性属性（可见/隐藏）。
ng-focus 指令在评估为真实时对焦元素。

我遇到的问题是我的指令试图过早地聚焦元素（在块有足够的时间显示为可见性：可见之前），因此聚焦失败。快速测试显示，如果添加1秒长$ timeout延迟，它可以正常工作。

在尝试聚焦元素之前，如何确保焦点指令等到可见之前？

次要注意事项：我知道ng-show / ng-hide（在我的测试中有效），但我需要在这里使用CSS visibility属性。

HTML

<button ng-click="showMe = true; focusMe = true;"></button>

<div ng-visible="showMe">
    <input type="text" ng-focus="focusMe"/>
</div>

可见性指令

app.directive('ngVisible', function($animate) {
    return {
        restrict: 'A',
        multiElement: true,
        link: function(scope, element, attr) {
            scope.$watch(attr.ngVisible, function(value) {
                if( value === true ) {
                    $animate.removeClass(element, 'invisible', function() {
                            scope.$apply();
                    });
                } else {
                    $animate.addClass(element, 'invisible', function() {
                    scope.$apply();
                    });
                }
            });
        }
    }
});

焦点指令

app.directive('ngFocus', function($timeout, $parse) {
    return {
        link: function(scope, element, attr) {
            var model = $parse(attr.ngFocus);

            scope.$watch(model, function(value) {
                if(value === true) {
                    $timeout(function() {
                        element[0].focus(); 
                    });
                }
            });

            // Set attr value to false on blur event so it can be refocused
            element.bind('blur', function() {
                scope.$apply(model.assign(scope, false));
            });
        }
    };
});

切换可见性后关注文本输入（使用AngularJS指令）

0 个答案: