angularjs - 如何使用 AngularJS 同时 ngShow 和 ngHide 两个不同的元素？

Question

所以我有两个独占的元素:

<span>foo</span>
<span>bar</span>

我向它们添加了 ngShow 和 ngHide:

<span ng-show="fooTime">foo</span>
<span ng-hide="fooTime">bar</span>

但是现在当这些渲染时，它们都显示在一瞬间。

我怎样才能让它们同时显示/隐藏？

Answer 1

使用 ngSwitch 而不是 ngShow/ngHide:

<span ng-switch="fooTime">
    <span ng-switch-when="true">foo</span>
    <span ng-switch-when="false">bar</span>
</span>

为什么？

当使用单独的 ngShow/ngHides 时，每个元素都会获得一个单独的 $watch，它异步执行，从而在事件之间留下潜在的间隙。通过使用 ngSwitch，只设置了一个 $watch，因此它们必须同时渲染。

我是如何进入 ngSwitch 的？

在我第一次尝试时，我意识到 watch 并没有捆绑在一起，所以我求助于让 CSS 将更改捆绑在一起:

<style>
    [first] .fooTime {
        display: inline;
    }
    [second] .fooTime, [first] {
        display: none;
    }
</style>

<span ng-class="{'fooTime':fooTime}">
    <span first>foo</span>
    <span second>bar</span>
</span>

但是 ngSwitch 更干净。

编辑:
好像是 ngSwitch triggers enter and leave animations因此，如果您使用 ngAnimate，则默认设置为 0.2 秒的过渡。我还没有找到解决这个问题的方法。