Javascript 如何在正确的时间更改角度后在输入中选择文本？

我有一个输入框。当文本更改时，我需要选择文本。我知道有很多活动正在进行，我需要等待它们结束。我输入了一个超时，它就工作了。然而，我不想依赖一个恒定的时间。在完成文本更改后，有没有办法选择文本

HTML示例：

<input type="text" value="{{txt}}">
<button ng-click="select()">Press</button>

---

编辑：从答案来看，使用超时（即使延迟为0）似乎是一种常见做法，但问题仍然是这是否能保证在Angular完成文本更新后进行选择。

为此，您可以使用延迟为0的$timeout

$timeout(function(){
    document.querySelector("input").setSelectionRange(0, 4); 
});

---

Angular会在下一个

$digest

周期中更改DOM，速度非常快，但一旦运行

$scope.x=？？

，它将不可用。在这种情况下，我们通常使用

$timeout

来“等待”。

为此，您可以使用$timeout和0延迟

$timeout(function(){
    document.querySelector("input").setSelectionRange(0, 4); 
});

---

Angular会在下一个

$digest

周期中更改DOM，速度非常快，但一旦运行

$scope.x=？？

，它将不可用。在这种情况下，通常我们会使用

$timeout

来“等待”。

如果您不想使用

$timeout

，可以使用

ng blur

触发事件。当元素失去焦点时，将触发模糊事件

HTML:

    <div ng-controller="MyCtrl">
        <form>
            <input type="text" ng-blur="select()" value="{{txt}}">
            <button>Press</button>
        </form>
    </div>

angular.module('MyApp', []).controller('MyCtrl', function ($scope, $interval) {       
    $scope.select = function () {    
        document.querySelector("input").setSelectionRange(0, 4);
    }
});

---

如果不想使用

$timeout

，可以使用

ng blur

触发事件。当元素失去焦点时，将触发模糊事件

HTML:

    <div ng-controller="MyCtrl">
        <form>
            <input type="text" ng-blur="select()" value="{{txt}}">
            <button>Press</button>
        </form>
    </div>

angular.module('MyApp', []).controller('MyCtrl', function ($scope, $interval) {       
    $scope.select = function () {    
        document.querySelector("input").setSelectionRange(0, 4);
    }
});

---

$timeout 0 delay实际上已经足够好了，因为angular的脏检查（和$digest循环）是同步进行的。（0延迟仅在当前进程空闲时触发）

如果你真的想保证，以下是方法：

angular.module('MyApp', []).controller('MyCtrl', function ($scope, $timeout) {
    $scope.txt = "Hello World";
    $scope.select = function () {
        $timeout(function () {
            $scope.$apply(function () {
                $scope.txt = "Bye World";
            });
            document.querySelector("input").setSelectionRange(0, 4);
        });
    };
});

---

您必须使用timeout来包装$apply，因为scope函数将触发$digest，并且您不能在$digest周期内调用$digest（$apply为您调用$digest）$此处应用保证范围变量被更新，因此您的setSelectionRange只会在更新后发生。

$timeout 0 delay实际上已经足够好了，因为angular的脏检查（和$digest cycle）是同步进行的。（0延迟仅在当前进程空闲时触发）

如果你真的想保证，以下是方法：

angular.module('MyApp', []).controller('MyCtrl', function ($scope, $timeout) {
    $scope.txt = "Hello World";
    $scope.select = function () {
        $timeout(function () {
            $scope.$apply(function () {
                $scope.txt = "Bye World";
            });
            document.querySelector("input").setSelectionRange(0, 4);
        });
    };
});

---

您必须使用timeout来包装$apply，因为scope函数将触发$digest，并且您不能在$digest周期内调用$digest（$apply为您调用$digest）$在此处应用可确保范围变量已更新，因此您的setSelectionRange将仅在更新后发生。

是否要设置延迟？@Ved否，我要避免使用延迟和超时。是否要设置延迟？@Ved否，我要避免使用延迟和超时。我明白了，这是一种常见做法吗？并保证在文本更改后会发生？是的，这很常见。我不能保证，不过，你可以自己尝试几次（我明白了，这是一种普遍的做法吗？并保证在文本更改后会发生？是的，这很常见。不过，我不能保证，你可以自己尝试几次