本文介绍了我如何ngShow和ngHide同时与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两个不同的元素呢?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

10-21 13:34