Question

我创建了一个用于在树结构中显示大量数据的指令。折叠元素时，使用ng-show命令隐藏其内容。

以下是一个大大简化的版本on plunker。

该指令称为collapsible-test，用作原因：

<div collapsible-test>
    <p>Here is some content....</p>
    <div collapsible-test>
        <p>Here is some more content....</p>
        <div collapsible-test>
            <p>Here is even more content....</p>
        </div>
    </div>
</div>

控制折叠的指令模板部分如下所示：

<div ng-show="!collapsed" class="panel-body">
    <div ng-transclude></div>
</div>

这一切都很好，但是我需要使用ng-repeat将它用于数百个的嵌套元素。这会导致页面加载10-15秒，然后在展开和折叠元素时也会出现很大的延迟。

我试图通过用ng-switch替换ng-show指令来缓解这个问题。（我将在以后更新角度时使用ng-if。）此方法不起作用，因为对尚不存在的DOM元素使用transclude服务会产生错误。

<div ng-switch="collapsed">
    <div ng-switch-when="false" class="panel-body">
        <div ng-transclude></div>
    </div>
</div>

我想我每次改变'崩溃'状态时都可能需要重新编译，但我无法理解如何使其工作。

或许，或许有一种更好的方法来解决我尚未想到的问题。

修改

OverZealous完美地回答了我的问题，谢谢！对于那些尝试类似东西的人来说，这只是一个更新。此方法仅在ng-repeat循环之外工作。看来ng-if在测试失败时将DOM代码转换为注释。因此，ng-repeat只会重复评论（或类似的东西）。所以ng-if和ng-switch仍然不是万无一失的，但它们很好，你不需要ng-repeat。

Answer 1

如果您可以升级到Angular.js 1.1.5（预发行版）或1.2.0-rc2（候选发布版），则可以使用ng-if来完成此工作。

Example Plunker.

模板：

<div class="panel-body">
    <div ng-if="!collapsed" ng-transclude></div>
</div>

我所做的是将ng-show更改为ng-if，并将其直接移至ng-transclude元素。这似乎有效，如果您查看开发人员工具中的DOM，您可以看到父项折叠时所有后代节点都被删除。

请注意，展开父级时会重建所有子元素，因此除非您在某处保存折叠状态，否则将在折叠状态下重新创建子节点。这可能会让您的用户感到困惑。

如果您无法升级到最新版本

您可以使用Angular UI提供的ngIf，它应该完全相同：

https://github.com/angular/angular.js/blob/master/src/ng/directive/ngIf.js

AngularJS指令：使用ng-switch打破了转换

1 个答案: