Question

我有一个像这样的html按钮：

<button autofocus role="button" ng-disabled="something.$invalid">{{ Continue }}</button>

该按钮最初被禁用，因此自动对焦属性没有任何效果。我想要发生的是当按钮启用时，我希望立即关注按钮。

我该如何做到这一点？

编辑：如下所述，监视值然后将焦点设置为元素的指令是解决此问题的一种方法。我试图创建与下面相同的指令，但焦点似乎没有设置。

Answer 1

正如评论中所提到的，指令对此有利。以下内容将观察模型并传递给它，并在元素变为 true 时关注该元素。

module.directive('focusToMe', function($parse) {
    return {
        restrict: 'A',
        compile: function() {
            var directiveName = this.name;

            return function(scope, element, attrs) {
                scope.$watch(attrs[directiveName], function(newVal, oldVal) {
                    if (newVal) {
                        element.focus();
                    }
                })
            }
        }
    }
});

然后，您可以将其添加到按钮元素：

<button autofocus role="button" ng-disabled="something.$invalid" focus-to-me="something.$invalid">{{ Continue }}</button>

Answer 2

以下指令控制应用它的元素的焦点：



.directive('focusOn', function() {
    return function(scope, elem, attrs) {
        scope.$watch(function(scope) {
            return scope[attrs.focusOn];
        },
        function(val) {
            if (val) {
                elem[0].focus();
            }
        });
    };
});

.directive('focusOn', function() { return function(scope, elem, attrs) { scope.$watch(function(scope) { return scope[attrs.focusOn]; }, function(val) { if (val) { elem[0].focus(); } }); }; }); 将它应用于按钮元素，如：

<button focus-on="focusMe">click-me</button>

请参阅此插件中的完整示例： http://plnkr.co/edit/zrd9hl7ilTrhIKshStXR?p=preview

Answer 3

啊，我让它工作了。我必须将焦点函数设置为在事件循环的一个循环之后使用$ timeout来触发，如下所示：

.directive('focusToMe', function($timeout) {
        return {
            restrict: 'A',
            compile: function() {
                var directiveName = this.name;

                return function(scope, elem, attrs) {
                    scope.$watch(attrs[directiveName], function(newVal, oldVal) {
                        if (newVal) {
                            $timeout(function() {
                                elem[0].focus();
                            }, 0)
                        }
                    })
                }
            }
        }
    })

如何在启用后关注按钮？

3 个答案: