Angular JS中的双向绑定

Two way binding in Angular JS

本文关键字：绑定 JS Angular      更新时间：2023-09-26

我在以下代码中遇到问题。

我的网页代码：

<body ng-app="myapp">
    <div ng-controller="myController">
    The message is {{message}}
        <input type="button" value="Change Message" ng-click="changeMessage()">
   </div>

我的控制器代码：

app.controller('myController',function($scope)
{              
 $scope.changeMessage=function()
    {
        setTimeout(function(){
        console.log("Message changed");
      $scope.message="Hurray !!! New Message";    
        },3000);
$scope.newMessage=function()
        {
            $scope.message="hello";
            console.log("new message");
        };

但是，如果我使用 changeMessage 函数，即使控制台.log消息来了，我也无法看到更改的消息属性。在这两种情况下，这里都缺少什么。

提前致谢

更改未反映在视图中的原因是，由于赋值是在 setTimeout 的回调中完成的，这导致角度没有注意到更改。这与所谓的digest周期有关。有不同的方法可以解决这个问题。

使用$scope.$apply()包装作业

甚至更好地使用Angular提供的现有$timeout服务，而不是已经为您处理上述问题的setTimeout调用。

有关详细信息，请参阅$timeout的用法 https://docs.angularjs.org/api/ng/service/$timeout

https://docs.angularjs.org/api/ng/type/$rootScope.Scope$apply背后的原因。

对

这里发生的事情的一般解释在 http://www.sitepoint.com/understanding-angulars-apply-digest/

每个更改都应该发生在一个角度摘要周期内。 如果您从外部更改值（这正是发生的情况，如果您使用setTimeout而不是 Angular 的$timeout），则在下一个摘要周期 （https://www.ng-book.com/p/The-Digest-Loop-and-apply/） 之前不会更新您的视图。 因此，在您的情况下，message已经设置，但视图尚未更新。

尝试这样的事情： 

app.controller('myController', function($scope, $timeout) {
  $scope.changeMessage = function() {
    $timeout(function(){
      console.log("Message changed");
      $scope.message="Hurray !!! New Message";    
    }, 3000);
  $scope.newMessage=function() {
    $scope.message="hello";
    console.log("new message");
  };
您应该

在超时完成后使用 $digest（）：

$scope.changeMessage=function()
{
   setTimeout(function(){
    $scope.message="Hurray !!! New Message";  
    $scope.$digest();
   },3000);
}

请注意，使用 $digest 比使用 $apply（与性能相关）要好得多：

scope.$digest（） 将在当前作用域及其所有子作用域上触发监视程序。 scope.$apply 将计算传递的函数并运行 $rootScope.$digest（）

相关文章：