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，因为它使用其父级的范围，但这只是避免问题而不是解决问题。阅读有关嵌套作用域的内容，以便您了解实际发生的情况。

另外，看看这个：小提琴