为啥 $scope.value 仅在我们单击文本框和屏幕后才显示为预填充文本框，即使使用 Angular 的就绪功能

Posted 2023-05-09

【中文标题】为啥 $scope.value 仅在我们单击文本框和屏幕后才显示为预填充文本框，即使使用 Angular 的就绪功能

【英文标题】：Why $scope.value is only showing as prefilled textbox after we click on Text box and screen even using angular's ready function为什么 $scope.value 仅在我们单击文本框和屏幕后才显示为预填充文本框，即使使用 Angular 的就绪功能

【发布时间】：2020-09-14 20:44:57

【问题描述】：

我正在尝试在准备好的函数中使用 $scope.lastName="ThisIsLastname" 设置名为 lastName 的 ng-model 的值。我可以设置值，也可以设置它，因为我可以在控制台中看到，但问题是文本框本身没有出现值（文本框没有预填充）。仅当我单击文本框然后单击屏幕中的任意位置时，才会预填充文本框。

<input type="text" ng-model="lastName" /> <!-- this textbox should be prefilled when screen load using ng-model only -->


angular.element(document).ready(function () 
    console.log("is ready now");
    $scope.lastName="ThisIsLastname"; //set value
    console.log($scope.lastName); // I can see that value has been set successfully.
);

所以当我重新加载页面时，我可以看到一旦调用了准备好的函数，该值就会打印在控制台上，但是我可以看到空文本框（姓氏的值未显示在文本框上）。

但是当我第一次单击那个空文本框，然后单击屏幕上的任意位置时，会出现文本框的值。我不明白是什么让它现在出现但在调用 ready 函数时没有出现。

我不需要替代解决方案，我想了解为什么会发生这种情况！

【参考方案1】：

在 angularjs 中，angular.element 是一个 jqLite 对象

---

用归零的$timeout 包装代码以触发摘要循环：

console.log("is ready now");

$timeout(function()      
  $scope.lastName="ThisIsLastname";    
); 

console.log($scope.lastName); 

【参考方案2】：

.ready() 不是 angularjs 的一部分，而是 jqlite (jquery)。因此，即使您正在分配 $scope.value，您也已经开始了一个摘要循环来更新 dom。

您可以在分配 $scope.value 后添加 $scope.$apply() 以运行摘要循环。