angularjs - 如果放置在 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

你有两个问题:

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:

   <span ng-show="model.changeable != key" ng-click="model.changeable = key">{{item.name}}</span>
   

插件: http://plnkr.co/edit/TTAUsPhqSq2rkF47EtNL?p=preview