AngularJSで子スコープを作成するディレクティブ

Question

複雑なフォームを作成するときに、ビューの一部を別の子スコープに分割して個別の視覚的プロパティを持つ必要があることがわかりました。

良い例は、「クリック編集」の動作を実装することです。何かを表示する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に新しいスコープを作成するだけの指示は見つかりませんでした。 1つはありますか？

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

そして、ちょうど私のソースの例では<span class="editable" child-scope>に追加し、それを使用します。私は、単純な1行のディレクティブを書いてきた非常にまっすぐな解決策の一つとして

Answer 1

。

しかし、それを行うための標準的な指示があるかもしれませんか？

もしそうでなければ、私はこの解決策が他の人には有用であると考えます。