AngularJS 超时后无更新数据

Question

我对 AngularJS 中的绑定有疑问。这是我的代码示例：

.controller("user", function(){
    this.test = 'hi!';
    this.getCourseSeriesProducts = function(){          
        setTimeout(function(){
            alert(this.test);
            this.test = 'bye';
            alert(this.test);
        },3000);
    }
});

问题是，在setTimeout之后的第一个alert中，结果是undefined，但理论上应该有'hi!'值。因此，当我将结果更改为警报 'bye' 时，屏幕上的值没有改变，仍然是 'hi!'。发生什么事了？

Answer 1

请看下面的演示，使用 angular $timeout 而不是 setTimeout 并且你需要调用函数来执行它。

var app = angular.module('app', []);

app.controller('homeCtrl', function($scope, $timeout) {

  var test = 'hi!';

  this.getCourseSeriesProducts = function() {

    $timeout(function() {
      alert(test);
      test = 'bye';
      alert(test);
    }, 300);
  }

  this.getCourseSeriesProducts();


});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="homeCtrl">


  </div>
</div>

Answer 2

注意this关键字的使用。在你的函数中 this.getCourseSeriesProducts，上下文已更改，因此 this 与首次定义 this.test 时引用的上下文不同. 我建议放几个console.log(this)来理解。

AngularJS 超时后无更新数据

No update data after timeout in AngularJS

javascript

data-binding

angularjs