javascript - ng-click 不适用于 ng-if

Question

当使用 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

Answer 1

使用ng-show代替ng-if。那应该行得通。

Fiddle

Answer 2

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

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

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

Answer 3

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

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

另外，看看这个：小提琴

Answer 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

Answer 5

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