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

Question

我观察到，当我使用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

Answer 1

你有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>
   

plunker： http://plnkr.co/edit/TTAUsPhqSq2rkF47EtNL?p=preview