在创建复杂表单时,我发现需要将视图的某些部分分成不同的子范围,以便能够拥有单独的视觉属性。
一个很好的例子可能是实现“点击编辑”行为:当您有一个 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 中创建新范围的指令。有一个吗?