Direttiva che crea l'ambito figlio in AngularJS

Question

Durante la creazione di forme complesse ho trovato la necessità di separare alcune parti della mia vista in diversi ambiti figlio per poter avere proprietà visive individuali.

Il buon esempio potrebbe essere l'implementazione del comportamento "click-to-edit": quando si ha un html per visualizzare qualcosa e un altro per modificare.

Una delle soluzioni è creare una direttiva en che abbia un ambito isolato. Ma nel caso in cui il markup html per le diverse proprietà differisca molto, è necessario avere una sorta di "double transclusion" (compilare manualmente i template al passaggio).

Quindi più semplice è avere un piccolo copia-incolla, ma mostrare in modo diretto cosa sta succedendo con la vista. Questo semplifica molto il markup.

Ecco un esempio di codice che illustra questo problema:

<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> 

In questo scenario 'ambiti di bambino' è il primo che entrano in mente.

Ma non ho trovato la direttiva che crea semplicemente un nuovo ambito in AngularJS. Ce n'è uno?

Answer 1

Come uno della soluzione molto semplice che ho scritto un semplice direttiva di una sola riga:

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

e usarlo solo l'aggiunta di <span class="editable" child-scope> nel mio esempio fonte.

Ma potrebbe esserci qualche direttiva standard per farlo?

In caso contrario, ritengo che questa soluzione potrebbe essere utile per gli altri.