Question

在将代码转换为使用组件时，我遇到了一个问题。在组件控制器中，我使用$ timeout函数来延迟对象的更新。这适用于普通控制器，但不在组件内 - 代码非常简单：

this.settime = function(){
  this.showDisplay = {hide:true};
  $timeout(function() {
    this.showDisplay= {hide:false};
  }, 2000);
};

问题是更新的值没有传递给DOM，在这个示例中$ ctrl.showDisplay.hide设置为true，但是在超时完成后它不会返回false。我尝试过使用$ scope。$ apply（）;强制更新，但没有任何影响。

Answer 1

this您指的是内部$timeout函数与context不同，它位于控制器内部。在更改property对象的隐藏showDisplay时，您不需要更改对象的引用，您可以直接更改属性。

var self = this;
self.settime = function(){
  self.showDisplay = {hide:true};
  $timeout(function() {
    self.showDisplay.hide = false;
  }, 2000);
};

ES6版本

this.settime = function(){
  this.showDisplay = {hide:true};
  $timeout(() => {
    this.showDisplay.hide = false;
  }, 2000);
};

Angular 1.58组件$ timeout不应用更改

1 个答案: