使用Angular延迟页面加载后调用函数答案

【问题标题】：Call function after delay on page load using Angular使用Angular延迟页面加载后调用函数
【发布时间】：2016-07-01 20:45:09
【问题描述】：

我试图在页面加载后 2.5 秒内调用 Angular 中的函数，以查看表单字段是否已自动填充。正在调用该函数，但由于某种原因，仅当我离开该字段、更改选项卡、最小化浏览器等时才会调用该函数。如何在不要求用户执行任何这些操作的情况下完成此操作（即，它被称为无论如何，页面加载后 2.5 秒）。我在下面尝试了两种不同的实现，但它们的行为方式相同。

方法一：

var timer=false;
$scope.$watch('email', function(){
    if(timer){
         $timeout.cancel(timer)
}
    timer= $timeout(function(){
        $scope.emailChanged();
    }, 250)
});

方法二：

<div class="form-managed" ng-init="load()"></div>

$scope.load = () => {
    setTimeout(() => {
            $scope.emailChanged();
    }, 2500);
 };

更新：

从 cmets 我更改了代码以使用 $timeout 而不是我的其他实现。我还验证了在任何实现中都调用了该函数，但是当我尝试提取该字段时，该字段的值仍显示为 null。当前代码如下。

$timeout(() => {
    debugger;
    var thisEmail = document.getElementById("buyerEmail");
    $scope.emailChanged();
}, 5000);

输入字段：

<input type="email" class="form-control input-lg" name="email" id="buyerEmail" placeholder="Email address" autocomplete="email" ng-model-options="{updateOn: 'blur'}" ng-change="emailChanged($event)" required />

【问题讨论】：

把一个简单的console.log放到函数中，你会看到，它被调用了
第一个超时时间仅为 250 毫秒。为什么它在手表电子邮件中？
你说得对，webdeb 确实显示它正在被调用，但单步执行函数时，在表单中输入的值没有被记录。知道如何解决吗？
Arg0n，错字。如第二种方法所示，代码为 2500
这不是ng-nit 的用途。在控制器中调用函数

标签： javascript angularjs

【解决方案1】：

您添加多长时间的延迟并不重要。如果您从代码中填充了电子邮件输入的值，Angular 不会看到更改。这就是为什么只有在调整大小或进行其他一些强制 Angular 处理页面的更改后才能看到更改。

虽然您没有显示它，但我假设您在某处有一些代码来分配电子邮件值。可能是这样的：

$("txtEmail").val(myEmailVariable);

改成这样：

$timeout(function () {
  $("txtEmail").val(myEmailVariable);
});

【讨论】：

知道了。感谢您的帮助:)