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;

.

+3


source to share


1 answer


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 .

+4


source







All Articles