AngularJS多个ng-if未同时更新。为什么？怎么修？

Question

我有两个按钮来链接和取消链接社交登录提供程序。

<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>

现在每当我点击取消链接Facebook 时，我都会向服务器发送一个POST请求，然后发出单独的HTTP请求，以便在取消链接（或链接）后立即获取最新的用户信息） 一个帐户。

我不明白的问题是为什么在 Unlink Facebook 消失之前几乎整整一秒延迟。

我有两个按钮。它们不能同时处于活动状态，因为它们具有完全相反的条件。例如，如果我已经链接了一个帐户，当我尝试取消链接时，一旦收到数据，就会出现一个新按钮链接Facebook （应该如此），但它需要几秒钟取消关联Facebook 按钮消失。

我几乎可以肯定这与AngularJS生命周期管理有关。这有可能解决吗？

更新：此问题原来是.btn类上的此CSS属性：transition: background-color 0.25s ease-out;。

Answer 1

这不应该发生，但它取决于上下文（例如您的$watchers，DOM的复杂性等）。

在任何情况下，由于一次只能存在一个元素，因此使用ngSwitch会更有意义：

<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>

---

另请参阅此 short demo 。