Directive that creates child scope in AngularJS

Question

When creating complex forms I found the need of separating some parts of my view into different child scopes to be able to have individual visual properties.

The good example could be implementing 'click-to-edit' behaviour: when you have one html to view something and another to edit.

One of the solution is to create en directive that will have isolated scope. But in case if html markup for different properties differs a lot, you need to have kind of "double transclusion" (manually compile templates upon switching).

So more simplier is to have some small copy-pasting, but show dirrectly what is going on with view. This simplifies markup a lot.

Here is a sample code that illustrates that 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 scenario 'child scopes' is first that come into mind.

But I didn't found directive that simply creates new scope in AngularJS. Is there a one?

Answer 1

As one of the very straight solution I've wrote an simple one-line directive:

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

And use it just adding to <span class="editable" child-scope> in my source example.

But may be there is some standard directive for doing that?

If not, I consider this solution could be usefull for others.