我观察到,当我使用ng-include
指令添加模板时,ng-show
和ng-hide
似乎无效。
注意:已在angularjs 1.0.4
和1.0.5
template.html
<table ng-init="changeable = null">
<tr ng-repeat="(key, item) in items" ng-click="changeable = key">
<td>
<span ng-show="changeable != key">{{item.name}}</span>
<input ng-hide="changeable != key" ng-model="item.name">
</td>
<td>
<button ng-click="changeable = null">OK</button>
</td>
</tr>
</table>
template.html
<div ng-include src="'/changeable_table.html'"></div>
changeable_table.html
<table ng-init="changeable = null">
<tr ng-repeat="(key, item) in items" ng-click="changeable = key">
<td>
<span ng-show="changeable != key">{{item.name}}</span>
<input ng-hide="changeable != key" ng-model="item.name">
</td>
<td>
<button ng-click="changeable = null">OK</button>
</td>
</tr>
</table>
过了一会儿github@pkozlowski-opensource给了我一个指向wiki的链接,这个链接解释了为什么这个名称空间必要,这是The Nuances of Scope Prototypal Inheritance
答案 0 :(得分:6)
你有2个问题:
不要忘记ng-repeat
为每个条目及其执行方式创建新范围,changeable
属性不会在所有这些范围之间共享。正确定义模型(示例):
<table ng-init="model = {}; model.changeable = null">
并将对changeable
的所有引用更改为model.changeable
。
tr上的ng-click
将覆盖按钮上的ng-click
(当您单击按钮时,也会单击tr)。将tr ng-click
移动到范围:
<span ng-show="model.changeable != key" ng-click="model.changeable = key">{{item.name}}</span>
plunker: http://plnkr.co/edit/TTAUsPhqSq2rkF47EtNL?p=preview