Directive that creates a child region in AngularJS

Question

When creating complex forms, I discovered the need to separate some parts of my view into different child regions in order to have individual visual properties.

A good example would be the implementation of click-to-edit behavior: when you have one html for viewing something and another for editing.

One solution is to create an en directive that will have an isolated scope. But in case the html markup for different properties is very different, you need to have "double transclusion" (manually compile templates when switching).

Thus, it is more simplified to have a small copy instance, but show correctly what happens to the view. This greatly simplifies the markup.

Here is an example code that illustrates this 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> 

In this case, the "child areas" that come to mind are taken into account first.

But I did not find a directive that simply creates a new scope in AngularJS. Is there one?

Answer 1

As one of the simplest solutions, I wrote a simple one-line directive:

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

And use it by simply adding to the <span class="editable" child-scope> in my original example.

But can there be some standard directive for this?

If not, I believe this solution may be useful to others.