3

ng-includeディレクティブにテンプレートを含めるとng-show、ng-hide機能しないように見えることがわかりました。

注：angularjs1.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へのリンクが表示されます。これは、スコープのプロトタイプの継承のニュアンスです。

4

1 に答える 1

6

そこには2つの問題があります。

  1. ng-repeatこれにより、エントリごとに新しいスコープが作成され、その方法が作成されることを忘れないでください。changeableプロパティは、これらすべてのスコープ間で共有されるわけではありません。モデルを正しく定義します（例）：

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

    そして、へのすべての参照をchangeableに変更しmodel.changeableます。

  2. on trは、ボタンのonng-clickをオーバーライドしng-clickます（ボタンをクリックすると、trもクリックされます）。trng-clickをスパンに移動します。

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

プランカー： http ：//plnkr.co/edit/TTAUsPhqSq2rkF47EtNL？p = Preview

于 2013-02-27T01:07:22.500 に答える