angularjs - 在 AngularJS 中创建子作用域的指令

Question

在创建复杂的表单时，我发现需要将 View 的某些部分分成不同的子作用域，以便能够拥有单独的视觉属性。

一个很好的例子可能是实现“点击编辑”行为:当你有一个 html 来查看某些东西而另一个要编辑时。

解决方案之一是创建具有独立作用域的 en 指令。但是，如果不同属性的 html 标记差异很大，您需要有一种“双重嵌入”(切换时手动编译模板)。

所以更简单的是有一些小的复制粘贴，但直接显示 View 中发生了什么。这大大简化了标记。

这是说明该问题的示例代码:

<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>在我的源示例中。

但是可能有一些标准指令可以这样做吗？

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