ng-click 不适用于 ng-if答案

【问题标题】：ng-click not working with ng-ifng-click 不适用于 ng-if
【发布时间】：2015-01-18 07:35:26
【问题描述】：

使用 ng-if 时，为什么第二个按钮不起作用？

我想实现一个仅在设置模型值/不是“”/不为空时才存在的按钮。

模板：

<input type="text" ng-model="blub"/>
<br/>
<button ng-click="blub = 'xxxx'">X</button>
<br/>
<button ng-click="blub = 'yyyy'" ng-if="blub.length">Y</button>

控制器：

angular.module('test', [])
.controller('Main', function ($scope) {
    // nothing to do here
});

玩转：JSFiddle

【问题讨论】：

你用ng-if做什么？
它检查范围变量blub 的长度！= 0。然后它向我显示一个按钮。最后，我想使用该按钮取消设置变量。这允许用户完全删除该值。例如。 blub 是对象的一部分，只有在用户希望设置时才应设置。
顺便说一句：我也遇到了这个bug（离子？），如果被包裹起来，那么 ng-click 就没有用了-
AngularJS: ng-if not working in combination with ng-click?的可能重复

标签： javascript angularjs angularjs-ng-click angular-ng-if

【解决方案1】：

使用ng-show 而不是ng-if。应该可以的。

Fiddle

【讨论】：

你是如何制作 Fiddle 按钮的？
包装<kbd></kbd>标签之间的链接:)。
酷，我正要给出使用 ng-show 的答案，但无法制作角度代码的小提琴:(
@MuhammadReda 很漂亮，但真的很not semantic at all。请停止这样做。
我认为应该是评论，而不是答案

【解决方案2】：

它不起作用，因为 ng-if 正在创建一个新范围并将您的 blub = 'yyyy' 解释为在新范围中定义一个新的局部变量。您可以通过将第二个按钮放在以下位置来测试：

<button ng-click="$parent.blub = 'yyyy'" ng-if="blub.length">Y</button>

但是 $parent 是一个丑陋的功能。

【讨论】：

使用 $parent 很容易使代码膨胀，例如链接 $parent 调用 ($parent.$parent.property)。

【解决方案3】：

由于ng-if 创建的嵌套范围，该按钮不起作用。绑定到第二个按钮的blub 与绑定到第一个按钮的blub 不同。

您可以使用ng-show 而不是ng-if，因为它使用其父级的作用域，但这只是避免问题而不是解决问题。阅读nested scopes，以便了解实际发生的情况。

另外，请查看：fiddle

【讨论】：

【解决方案4】：

尝试在变量上放置一个魔法点

<input type="text" ng-model="bl.ub"/>
<br/>
<button ng-click="bl.ub = 'xxxx'">X</button>
<br/>
<button ng-click="bl.ub = 'yyyy'" ng-if="bl.ub.length">Y</button>

jsfiddle

【讨论】：

【解决方案5】：

您可以使用：[hidden]="!expression"

【讨论】：