1

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

这是plunker的一个高度简化的版本。

该指令称为可折叠测试，并按如下方式使用：

<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 元素使用 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。

4

1 回答 1

1

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

示例 Plunker。

模板：

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

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

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

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

您可以使用ngIfAngular UI 提供的，它的工作方式应该完全相同：

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

于 2013-09-14T02:18:09.153 回答