在 AngularJS 中创建子范围的指令答案

【问题标题】：Directive that creates child scope in AngularJS在 AngularJS 中创建子范围的指令
【发布时间】：2013-06-06 18:35:40
【问题描述】：

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

一个很好的例子可能是实现“点击编辑”行为：当您有一个 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 中创建新范围的指令。有吗？

【问题讨论】：

嗨 Valentyn，我和你有很深的联系，我创建了一个可编辑的指令，看起来和你的一样;-)

标签： angularjs angularjs-directive

【解决方案1】：

作为最直接的解决方案之一，我编写了一个简单的单行指令：

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

在我的源代码示例中，只需添加到 <span class="editable" child-scope> 即可使用它。

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

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

【讨论】：