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>。

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

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

在AngularJS中创建子范围的指令

1 个答案: