Angular ng-show 处理未定义的变量

Question

我有两个根据配置的变量显示的指令。

这在视觉上可行，但在验收测试期间我发现了一个问题。我试图断言如果 <settingElement> 没有被点击（配置 var selected），这两个指令都不会显示。 <directiveA> 的测试通过了，但 <directiveB> 的测试失败了，这让我有点困惑。

代码示例如下：

<settingElement ng-click="selected = trueOrFalse()"></settingElement>

<directiveA ng-show="selected"></directiveA>
<directiveB ng-show="!selected"></directiveB>

Answer 1

成功！至少在某种程度上，代码在视觉上是有效的，所以我没有测试 isDisplayed，而是简单地断言高度和宽度都是 0...不理想但有效。

Answer 2

可能更好的方法是在两个元素的父元素中定义 selected，例如：

<div ng-init="selected = false;">
    <settingElement ng-click="selected = true"></settingElement>

    <directiveA ng-show="selected"></directiveA>
    <directiveB ng-show="!selected"></directiveB>
</div>

另一个"shorter workaround"会是

<settingElement ng-click="selected = true"></settingElement>

<directiveA ng-show="!!selected"></directiveA>
<directiveB ng-show="!selected"></directiveB>

Answer 3

可能是因为表达式触发了未定义的值

试试 ng-if ="selected" or ng-show="selected==true"

Angular ng-show 处理未定义的变量

Angular ng-show handling undefined variables

javascript

angularjs

ng-show

angularjs-ng-show