Question

我正在使用angular的ng-switch来构建像这样的表单字段

<div ng-switch="vm.myField">
    <my-input-type1 ng-switch-when="type1"></my-input-type1>
    <my-input-type2 ng-switch-when="type2"></my-input-type2>
    <my-input-type3 ng-switch-when="type3"></my-input-type3>
    <my-input-type4 ng-switch-when="type4"></my-input-type4>
    <my-input-type5 ng-switch-when="type5"></my-input-type5>
    <my-input-type6 ng-switch-when="type6"></my-input-type6>
    <my-input-type7 ng-switch-when="type7"></my-input-type7>
    <my-input-type8 ng-switch-when="type8"></my-input-type8>
</div>

由于性能的原因，这不是一个好的解决方案（在进入视图时brwser暂停一段时间）。没有ng-switch，一切都还可以。

我该如何优化它？ ng-if具有相同的prefomrance问题。

Answer 1

您可能从Angular文档（https://docs.angularjs.org/api/ng/directive/ngSwitch）

中了解到

ng-switch通过添加和删除基于条件语句的嵌套DOM元素来工作。对于大型模板/ DOM元素，这可能非常慢。

我使用的一个解决方案是使用ng-show / ng-hide（https://docs.angularjs.org/api/ng/directive/ngShow）。

这些指令不会修改DOM结构，而是使用CSS来隐藏/显示元素。它可以更快，但要注意，如果你陷入尝试以这种方式同时在内存中包含网站的所有模板/ DOM元素的陷阱，DOM可能变得非常大。

Answer 2

我想我找到了解决方案。而不是ng-switch我正在使用 <ng-include src="'/my-fields/directives/'+vm.myField+'.html'"></ng-include>使用正确的HTML代码。现在工作得很好，但还要测试一下。

编辑：现在它更快，更快

如何优化ng-switch

2 个答案: