如果放在ng-include附带的文件中,ng-show / ng-hide将停止工作

时间:2013-02-27 00:11:08

标签: angularjs

我观察到,当我使用ng-include指令添加模板时,ng-showng-hide似乎无效。

注意:已在angularjs 1.0.41.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

1 个答案:

答案 0 :(得分:6)

你有2个问题:

  1. 不要忘记ng-repeat为每个条目及其执行方式创建新范围,changeable属性不会在所有这些范围之间共享。正确定义模型(示例):

    <table ng-init="model = {}; model.changeable = null">
    

    并将对changeable的所有引用更改为model.changeable

  2. tr上的ng-click将覆盖按钮上的ng-click(当您单击按钮时,也会单击tr)。将tr ng-click移动到范围:

    <span ng-show="model.changeable != key" ng-click="model.changeable = key">{{item.name}}</span>
    
  3. plunker: http://plnkr.co/edit/TTAUsPhqSq2rkF47EtNL?p=preview