ng show/ng hide如果放置在包含ng include的文件中，则停止工作

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的链接，它很好地解释了为什么这个名称空间是必要的，它是范围原型继承的Nuances

Answer 1

您有两个问题：

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