在AngularJS中创建子范围的指令

Question

在创建复杂表单时,我发现需要将视图的某些部分分成不同的子范围,以便能够具有单独的视觉属性.

好的例子可能是实现"点击编辑"行为:当你有一个html来查看某个内容而另一个需要编辑时.

其中一个解决方案是创建具有隔离范围的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中创建新范围的指令.有一个吗？

Answer 1

作为一个非常直接的解决方案,我写了一个简单的单行指令:

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

并使用它只是<span class="editable" child-scope>在我的源代码示例中添加.

但可能有一些标准指令可以做到这一点？

如果没有,我认为这个解决方案可能对其他人有用.