我如何ngShow和ngHide同时与AngularJS两个不同的元素呢？ [英] How do I ngShow and ngHide two different elements at the same time with AngularJS?

问题描述

所以，我有一个不包括两个元素：

So I have two elements that are exclusive:

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

和我添加ngShow和ngHide对他们说：

And I added ngShow and ngHide to them:

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

但现在，当这些渲染，有一瞬间，他们都显示。

But now when these render, there is a split second where they both show.

我怎样才能让他们在同一时间显示/隐藏？

How can I make them show/hide at the same time?

推荐答案

使用一个ngSwitch而非ngShow / ngHide：

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

为什么？

当采用独立ngShow / ngHides，每个元件是得到一个单独的$手表其中执行所异步地离开潜在的事件之间的间隙。通过使用ngSwitch，只有一个$手表设置，使他们必须在同一时间渲染。

When using the separate ngShow/ngHides, each element is getting a separate $watch which execute asynchronously leaving the potential for a gap between the events. By using ngSwitch, only one $watch is setup so they must render at the same time.

我是如何走到ngSwitch？

在我的第一次尝试，我意识到手表并没有绑在一起，所以我使出让CSS绑在一起的变化：

On my first attempt, I realized the watches were not tied together, so I resorted to letting CSS tie the changes together:

<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更加干净。

But ngSwitch is much more clean.

编辑：
这似乎ngSwitch 触发进入和离开的动画的，所以如果你使用的是ngAnimate，有一个默认的的0.2秒的过渡。我还没有找到解决的办法呢。

It seems ngSwitch triggers enter and leave animations so if you are using ngAnimate, there is a default of a .2 second transition. I haven't found a way around this yet.

这篇关于我如何ngShow和ngHide同时与AngularJS两个不同的元素呢？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！