javascript - 确保在 UI 中对监视属性的更改生效后*执行代码

Question

在 AngularJS 中，如何确保代码仅在对监视属性的更改在 UI 中完全生效之后执行。

例如，假设加载指示器的可见性绑定(bind)到模型上的 isLoading 属性的值。如何确保仅在加载指示器可见后才执行后续功能？

例如

我的模板.html

<my-loading-indicator ng-show="model.isLoading"></my-loading-indicator>

我的 Controller .js

// ...
MyController.prototype.doSomething = function() {
  this.model.isLoading = true;
  // how can I guarantee that the UI is now showing the loading indicator before proceeding?
}

Answer 1

您需要使用 $timeout，它在摘要周期完成之前不会运行。

// will start digest cycle since it is bound to `ng-show`
this.model.isLoading = true;

$timeout(function(){
   // indicator should be visible now
}[,optional delay]);

不要忘记在任何使用它的地方注入(inject)$timeout