I've got a condition in ng-if="ctrl.zoo" (in some directive where ctrl.zoo = ctrl.foo && ctrl.bar). The problem is that bar initializes by async function call and angularJS for some reason doesn't update my UI even though I included bar to my scope. I google that it's a bad idea to watch other variables to assign a new value for another (basically watch for changes of bar). It did work perfectly though if I inline ctrl.zoo (e.g.ng-if="ctrl.foo && ctrl.bar"`). Is there any simple fix about it?
Add a comment
|
1 Answer
If you assign zoo = foo && bar in your controller, that is the value zoo is going to stay as regardless of whether or not the value of bar changes.
If you want zoo to update, you have a couple of options:
Update the value of
zooagain tofoo && barafter your async function call is finished.Write a function in your directive controller called
getZoo()which returnsfoo && bar. Use that function in your directive's template and when you update the value ofbaron the directive's scope, the scope will run a digest loop, and that function will return the new value. The reason that inliningctrl.foo && ctrl.barin your template works is because you're doing essentially this.
2 Comments
J. Doe
Actually I tried the 1st way: and it doesn't work as well, now I'll try the second one. I had 1: this.zoo = false; 2: async(result) -> {this.foo = result; this.zoo = this.foo && this.bar; }
hayzey
Were you using an async function? If so, it may have been failing because that would not be tied into Angular's digest loop. You would need to run
$rootScope.$digest() or $timeout() or something similar to force a digest loop to run. It would be much cleaner to avoid this and use Angular's $http service to perform HTTP request instead, as this is tied into the digest loop and will therefore update your view with the new data.