Why does the second button not work, when ng-if is used?
当使用ng-if时，为什么第二个按钮不能工作?
I want to realize a button that is present only when the model value is set / not ""/ not null.
我想要实现一个只有当模型值被设置/ not“”/ not null时才出现的按钮。
Template:
模板:
<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>
Controller:
控制器:
angular.module('test', [])
.controller('Main', function ($scope) {
// nothing to do here
});
To play around: JSFiddle
玩耍:JSFiddle
4 个解决方案
#2
6
It doesn't work because ng-if is creating a new scope and interpreting your blub = 'yyyy' as defining a new local variable in the new scope. You can test this by putting the second button to:
它不起作用，因为ng-if正在创建一个新范围，并将blub = 'yyyy'解释为在新范围中定义一个新的局部变量。您可以将第二个按钮设置为:
<button ng-click="$parent.blub = 'yyyy'" ng-if="blub.length">Y</button>
However $parent is an ugly feature.
然而，$parent是一个丑陋的特性。
#3
3
The button doesn't work because of the nested scope created by ng-if. The blub bound to the second button is not the same blub that's bound to the first one.
由于ng-if创建的嵌套范围，该按钮无法工作。被绑定到第二个按钮的blub与第一个按钮的blub不一样。
You can use ng-show instead of ng-if, since it uses its parent's scope, but that's just avoiding the problem instead of solving it. Read about nested scopes so you can understand what actually happened.
您可以使用ng-show代替ng-if，因为它使用父范围，但这只是避免问题，而不是解决问题。阅读有关嵌套范围的内容，以便了解实际发生的情况。
Also, check this out: fiddle
还有，看看这个:古提琴
#4
3
Try putting a magic dot on the variable
试着在变量上画一个神奇的点
<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
#1
#2
6
It doesn't work because ng-if is creating a new scope and interpreting your blub = 'yyyy' as defining a new local variable in the new scope. You can test this by putting the second button to:
它不起作用，因为ng-if正在创建一个新范围，并将blub = 'yyyy'解释为在新范围中定义一个新的局部变量。您可以将第二个按钮设置为:
<button ng-click="$parent.blub = 'yyyy'" ng-if="blub.length">Y</button>
However $parent is an ugly feature.
然而，$parent是一个丑陋的特性。
#3
3
The button doesn't work because of the nested scope created by ng-if. The blub bound to the second button is not the same blub that's bound to the first one.
由于ng-if创建的嵌套范围，该按钮无法工作。被绑定到第二个按钮的blub与第一个按钮的blub不一样。
You can use ng-show instead of ng-if, since it uses its parent's scope, but that's just avoiding the problem instead of solving it. Read about nested scopes so you can understand what actually happened.
您可以使用ng-show代替ng-if，因为它使用父范围，但这只是避免问题，而不是解决问题。阅读有关嵌套范围的内容，以便了解实际发生的情况。
Also, check this out: fiddle
还有，看看这个:古提琴
#4
3
Try putting a magic dot on the variable
试着在变量上画一个神奇的点
<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