javascript - AngularJS指令: Using ng-switch breaks transclusion

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 指令来缓解这个问题。 (稍后更新 Angular 时我将使用 ng-if。)这种方法不起作用，因为在尚不存在的 DOM 元素上使用嵌入服务会生成错误。

<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，您可以看到当父节点折叠时，所有后代节点都被删除。

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

<小时/>

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

您可以使用ngIf由 Angular UI 提供，其工作原理应该完全相同:

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