3

I have two buttons to link and unlink a social sign-in 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 whenever I hit Unlink Facebook for example, I send a POST request to the server, and then make a separate HTTP request to grab up-to-date user information right after unlinking (or linking) an account.

The problem that I don't understand is why there is almost a whole second delay before Unlink Facebook disappears.

I have two buttons. They cannot be active at the same time because the have the exact opposite conditions. If for example I have already linked an account, when I try to unlink it, as soon as the data is received, a new button appears Link Facebook (as it should) but it takes almost another second before Unlink Facebook button disappears.

I am almost certain this has something to do with AngularJS lifecycle management. Is this possible to fix?

Update: This issue turns out to be this CSS property on .btn class: transition: background-color 0.25s ease-out;.

Sahat Yalkabov
  • 32,654
  • 43
  • 110
  • 175

1 Answers1

4

This shouldn't happen, but it depends on the context (e.g. your $watchers, the complexity of your DOM etc).

In any case, since only one element should be present at a time, it would make more sense 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 short demo.

gkalpak
  • 47,844
  • 8
  • 105
  • 118
  • Thank you for the demo. I narrowed down the problem to Bootstrap 3. Removing `btn` classes seems to fix the issue. Now I need to ifnd out why does it happen. – Sahat Yalkabov Sep 12 '14 at 09:19
  • @TwilightPonyInc.: I can't really reproduce the problem. If you could provide a fiddle or plunkr I would gladly look into it ! – gkalpak Sep 12 '14 at 10:19