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

【问题标题】：How do I ngShow and ngHide two different elements at the same time with AngularJS?如何使用 AngularJS 同时 ngShow 和 ngHide 两个不同的元素？
【发布时间】：2013-12-03 01:42:02
【问题描述】：

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

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

我给它们添加了 ngShow 和 ngHide：

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

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

如何让它们同时显示/隐藏？

【问题讨论】：

你可以使用 ng-show="fooTime" 和 ng-show="!fooTime"。角度可能会先渲染所有 ng-show，然后再渲染所有 ng-hides。
那个代码也会有同样的问题... angular 只是按顺序排列，它不会选择某些标签先渲染。根本原因是这里有两个不同的手表，可以按任意顺序运行；给定的答案只有一个手表，因此元素将始终一起更新。

标签： angularjs angularjs-directive

【解决方案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，则默认转换为 0.2 秒。我还没有找到解决这个问题的方法。

【讨论】：

这对我不起作用:(它与使用 ng-show 有相同的问题（元素同时存在一瞬间）。我想这是进入/离开动画你在说什么？
对我也不起作用。我正在尝试将它与 Ionic 一起使用，以显示一个按钮，然后在点击按钮时显示一个离子旋转器。使用 ng-show 或 ng-switch 时，它们都会出现一瞬间。
ng-switch 方法对我不起作用，但 ng-class 方法确实如此支持
解决 200 毫秒过渡的方法是添加样式以覆盖它。这是排除浏览器前缀和目标ngSwitchWhen 的通用解决方案（应根据您的用例进行更改：[ng-switch-when] { transition-duration: 0s; }。

【解决方案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 的情况。

【讨论】：

【解决方案3】：

对@eternalmatt 的回答进行了投票和评论……这是我的解决方案，基于他解决方案的css 部分。以我的经验ng-swtich 不会解决这个问题。我正在使用scss，但您可以在此处将scss 转换为css http://www.sassmeister.com/。我的按钮指令模板根据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

【讨论】：