6

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

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

4

1 回答 1

5

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

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

并<span class="editable" child-scope>在我的源代码示例中添加它。

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

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

于 2013-06-06T10:35:40.380 回答