Dyrektywa, która tworzy zakres dla dzieci w AngularJS

Question

Podczas tworzenia złożonych formularzy znalazłem potrzebę oddzielenia niektórych części mojego widoku na różne zakresy potomne, aby móc mieć indywidualne właściwości wizualne.

Dobrym przykładem może być implementacja zachowania "kliknij, aby edytować": gdy masz jeden html do obejrzenia czegoś, a drugi do edycji.

Jednym z rozwiązań jest stworzenie dyrektywy, która będzie miała izolowany zakres. Ale w przypadku, gdy znaczniki HTML dla różnych właściwości znacznie się różnią, trzeba mieć rodzaj "podwójnego zakomunikowania" (ręcznie kompiluj szablony przy przełączaniu).

Bardziej uproszczone jest małe wklejanie do kopii, ale pokazuj, co się dzieje z widokiem. To znacznie upraszcza znaczniki.

Oto przykładowy kod, który ilustruje ten problem:

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

w tym scenariuszu "zakresów dziecka jest pierwszym, które przychodzą do głowy.

Ale nie znalazłem dyrektywy, która po prostu tworzy nowy zakres w AngularJS. Czy jest jeden?

Answer 1

Jako jeden z bardzo prostego rozwiązania ja dopisałem prostą dyrektywę w jednym wierszu:

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

i używać go tylko dodanie do <span class="editable" child-scope> w moim przykładzie źródłowego.

Może jest jednak pewna standardowa dyrektywa?

Jeśli nie, uważam, że to rozwiązanie może być przydatne dla innych.