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

In AngularJS, how can I ensure code is only executed after a change to a watched property has taken full effect in the UI.

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

For example, say that the visiblity of a loading indicator is bound to the the value of a isLoading property on a model. How can I ensure that subsequent functionality is only executed after the loading indicator has become visible?

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

e.g.

例如

my-template.html

我-template.html

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

my-controller.js

我-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?
}

2 个解决方案

#1

You would need to use $timeout which will not be run until digest cycle completes.

您需要使用$ 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]);

Don't forget to inject $timeout wherever you are using it

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

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

2 个解决方案

#1

更多相关文章

随机推荐