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？

在我的第一次尝试中，我意识到这些手表并没有捆绑在一起，所以我采取了让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，则默认为.2秒转换。我还没有找到办法解决这个问题。

Answer 2

你可以用一些 CSS 优雅地解决这个问题。

*[ng-switch] *[ng-switch-when] + *[ng-switch-when], 
*[ng-switch] *[ng-switch-when] + *[ng-switch-default] {
        display: none;
}

这使用通配符选择器 (*) 和 ng-switch-when 的属性选择器，使其成为适用于任何使用 ng-switch 的情况的通用解决方案。

Answer 3

对@eternalmatt的回答进行了评论和评论......这是基于他的解决方案css部分的解决方案。根据我的经验，ng-swtich无法解决此问题。我使用的是scss，但您可以将scss转换为css此处http://www.sassmeister.com/。我的button指令的模板，根据showSpinner的值切换按钮文本和ajax微调器。

模板

<button class="fin-button no-outline" ng-class="{disabled: state==='disabled'}" ng-click="action()">
  <span ng-class="{'showSpinner': showSpinner}">
    <span class="text-first" fin-button-text>{{text}}</span>
    <span class="glyphicon glyphicon-repeat spinner" fin-button-spinner></span>
  </span>
</button>

SCSS

.fin-button {
    [fin-button-text] {
        display: inline;
    }
    [fin-button-spinner] {
        display: none
    }
    .showSpinner {
        [fin-button-text] {
            display: none;
        }
        [fin-button-spinner] {
            display: inline;
        }
    }
}

通过上述链接转换生成的css ..

.fin-button [fin-button-text] {
  display: inline;
}

.fin-button [fin-button-spinner] {
  display: none;
}

.fin-button .showSpinner [fin-button-text] {
  display: none;
}

.fin-button .showSpinner [fin-button-spinner] {
  display: inline;
}

并且here be dragons评论我在代码

中的scss之上

// .... HERE BE DRAGONS ... ///
    // The following is used to hide show the spinner or the
    // button text. Needs to be done like this because ng-hide, ng-show,
    // ng-if, and ng-switch all put seperate watches even if you are conditioning
    // on the same vairable ... see this SO // http://stackoverflow.com/questions/20341288/how-do-i-ngshow-and-nghide-two-different-elements-at-the-same-time-with-angularj

如何使用AngularJS同时显示和ngHide两个不同的元素？

3 个答案: