Angularjs (1.4.0-5 beta) 指令中的超时只工作一次

Question

问题：

我有一个指令，用于将焦点设置在 HTML 文档中的输入上。然而，文本字段是隐藏的，并通过特定事件（例如按下按钮）激活。要处理渲染时间，需要超时，但只能使用一次。

有关最小示例，请参阅 fiddle。

请注意，有一个调试打印，第一次显示大约需要三秒钟，而接下来的时间会立即显示。这表明超时实际上只起作用一次。我该如何解决这个问题，任何帮助将不胜感激！

代码：

HTML（HTML 标记和正文省略）

<div>
    <button ng-click="bool = !bool">Click</button>
    <input ng-show="bool" my-focus="bool"></input>
</div>

AngularJS

var myApp = angular.module("CheckAllModule", []);

myApp.directive('myFocus', function ($compile, $timeout) {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            var timer = $timeout(function () {
                scope.$watch(attr.myFocus, function (n, o) {
                    if (n != 0 && n) {
                        console.log(element[0]); // Degub print
                        element[0].focus();
                        element[0].select();
                    }
                });
            }, 3000);
            element.removeAttr("my-focus");
            $compile(element)(scope);
        }
    };
});

更多详情

我当前的 AngularJS 版本是 1.4.0.beta-5，但同样的问题仍然存在于 1.4.0.beta-6。不过在Angular 1.2.1上好像没有问题。

此外，当不隐藏输入时，一切都像魅力一样，指令被调用但超时没有。

即使在 Fiddle 上，焦点甚至第一次都不起作用，但在点击 "run" 后它总是起作用。

Answer 1

如果我正确理解你的问题，我不是 100% 确定，但这会在点击后聚焦输入。

    var myApp = angular.module("CheckAllModule", []);

    myApp.directive('myFocus', function ($compile, $timeout) {
        return {
            restrict: 'A',
            link: function (scope, element, attr) {          
                var focus = function (n,o) {
                    $timeout(function() {
                        if (n != 0 && n) {
                            console.log(element[0]); // Degub print
                            element[0].focus();
                            element[0].select();
                        }
                    }, 3000);
                }

                scope.$watch(attr.myFocus, focus);

                element.removeAttr("my-focus");
                $compile(element)(scope);
            }
        };
    });

希望对您有所帮助！

Angularjs (1.4.0-5 beta) 指令中的超时只工作一次

Angularjs (1.4.0-5 beta) timeout in directive only works once

html

javascript

timeout

angularjs

angularjs-directive