6

複雑なフォームを作成するとき、ビューの一部を別々の子スコープに分割して、個別のビジュアル プロパティを持つことができるようにする必要があることに気付きました。

良い例は、「クリックして編集」動作を実装することです。何かを表示するための html と編集するための別の html がある場合です。

解決策の 1 つは、スコープを分離する en ディレクティブを作成することです。ただし、異なるプロパティの html マークアップが大きく異なる場合は、一種の「二重トランスクルージョン」(切り替え時にテンプレートを手動でコンパイルする) が必要です。

したがって、より簡単なのは、いくつかの小さなコピーと貼り付けを行うことですが、ビューで何が起こっているかを直接示します。これにより、マークアップが大幅に簡素化されます。

その問題を示すサンプル コードを次に示します。

<span class="editable" >
  <span ng-hide="editing">
    {{user.first}} <span ng-click="editing = true"><i class="icon-pencil"></i></span>
  </span>
  <span ng-show="editing">
    <input type="text" ng-model="user.first"> 
    <span ng-click="editing = false"><i class="icon-ok"></i></span>
  </span>
</span>
<span class="editable" >
  <span ng-hide="editing">
    {{user.last}} <span ng-click="editing = true"><i class="icon-pencil"></i></span>
  </span>
  <span ng-show="editing">
    <input type="text" ng-model="user.last"> 
    <span ng-click="editing = false"><i class="icon-ok"></i></span>
  </span>
</span>

このシナリオでは、「子スコープ」が最初に頭に浮かびます。

しかし、AngularJS で単純に新しいスコープを作成するディレクティブは見つかりませんでした。ありますか？

4

1 に答える 1

5

非常に率直な解決策の 1 つとして、単純な 1 行のディレクティブを作成しました。

.directive('childScope', function() {
  return { scope: true, restrict:'AE' }
});

<span class="editable" child-scope>そして、ソースの例に追加するだけで使用できます。

しかし、それを行うための標準的な指示があるのでしょうか?

そうでない場合は、このソリューションが他の人にとって役立つ可能性があると思います。

于 2013-06-06T10:35:40.380 に答える