Question

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

我想要实现一个按钮，只有在设置/不设置模型值时才会出现＆＃34;＆＃34; / not null。

模板：

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

另外，请检查一下：fiddle

Answer 4

尝试在变量上加上 magic 点

<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

ng-click不使用ng-if

4 个答案: