AngularJS multiple ng-if not updating at the same time. What for? How to fix?
I have two buttons for contacting and unlinking a social provider.
<button class="btn btn-default" ng-if="!user.facebook" ng-click="link('facebook')">
Link Facebook
</button>
<button class="btn btn-danger" ng-if="user.facebook" ng-click="unlink('facebook')">
Unlink Facebook
</button>
Now when I click Unlink Facebook , for example, I send a POST request to the server and then I make a separate HTTP request to get the most recent user information right after canceling (or linking) the account.
The problem I don't understand is that the almost full delay persists before Facebook's Unlink disappears.
I have two buttons. They cannot be active at the same time, because they have completely opposite conditions. If, for example, I have already contacted the account when I try to turn it off as soon as the data is received, there will be a new button Facebook URL (as it should be), but it takes about a second before the second button Remove the connection disappears.
I'm pretty sure it has something to do with AngularJS lifecycle management. Can this be fixed?
Update: This problem is this CSS property in the class .btn
: transition: background-color 0.25s ease-out;
.
source to share
This shouldn't be happening, but it depends on the context (like yours $watchers
, the complexity of your DOM, etc.).
In any case, since only one element needs to be present at a time, it would be wiser to use ngSwitch
instead:
<div ng-switch="user.facebook">
<button ng-click="user.facebook=true" ng-switch-default>
Link Facebook
</button>
<button ng-click="user.facebook=false" ng-switch-when="true">
Unlink Facebook
</button>
</div>
See also this one .
source to share