使用ng-if =“！collapsed”时折叠/折叠全部无法正常工作

Question

由于加载了大量记录，我的树上出现了性能问题，我不得不使用 ng-if =“！collpsed”来解决这个性能问题。但是，有了这个，崩溃或崩溃所有功能都不再起作用了。当我在控制器中使用它时，我总是得到同样的错误：

"Uncaught TypeError: Cannot read property 'collapse' of undefined". 

当我以这种方式调用colapseAll angular方法时会发生此错误，例如：“getRootNodesScope（id）.collapseAll（）;”。但是，如果我删除所有ng-if =“collapsed”，则不再出现此错误。如何在不删除ng-if =“collapsed”的情况下使用collapse / collapseAll角度函数？

以下是我的代码片段：

<div ng-app="folderApp" ng-controller="folderCtrl" id="deptoBodyController">
    <div>
        <div>
            <!-- Nested list template -->
            <script type="text/ng-template" id="items_renderer.html">
                <div vs-repeat>
                    <ol ui-tree-nodes ng-model="item.items">
                        <li ng-repeat="item in item.items" ui-tree-node ng-include="'items_renderer.html'"
                            ng-hide="!treeFilter(item, pattern, supportedFields) && !dim"
                            ng-class="{'filtered-out':!treeFilter(item, pattern, supportedFields) && dim}"
                            collapsed="true"
                            ng-if="!collapsed">
                        </li>
                    </ol>
                </div>
            </script>

            <div ui-tree="options">
                <div vs-repeat>
                    <ol ui-tree-nodes ng-model="list">
                        <li ng-repeat="item in list" ui-tree-node ng-include="'items_renderer.html'"
                            ng-hide="!treeFilter(item, pattern, supportedFields) && !dim"
                            ng-class="{'filtered-out':!treeFilter(item, pattern, supportedFields) && dim}"
                            collapsed="true"
                            ng-if="!collapsed">
                        </li>
                    </ol>
                </div>
            </div>
            <!-- Template for parent nodes -->
            <script type="text/ng-template" id="parent_nodes_renderer.html">
                <div vs-repeat>
                    <ol ui-tree-nodes="options" ng-model="item.items" ng-class="{hidden: collapsed}" collapsed="true" ng-if="!collapsed">
                        <li ng-repeat="item in item.items" ui-tree-node ng-include="(item.ultimoNivel) ? 'terminal_node_renderer.html' : 'parent_nodes_renderer.html'" collapsed="true" ng-if="!collapsed"> 
                        </li>
                    </ol>
                </div>
            </script>
            <!--The Root Node-->
            <div>
                <div ui-tree id="options" class="ng-scope angular-ui-tree" data-drag-enabled="false" data-max-depth="2">
                    <div vs-repeat>
                        <ol ui-tree-nodes="options" ng-model="data" class="ng-scope ng-pristine ng-valid angular-ui-tree-node" collapsed="true" ng-if="!collapsed">
                            <li ng-repeat="item in data" ui-tree-node ng-include="(item.ultimoNivel) ? 'terminal_node_renderer.html' : 'parent_nodes_renderer.html'"
                                ng-hide="!treeFilter(item, pattern, supportedFields) && !dim"
                                ng-class="{'filtered-out':!treeFilter(item, pattern, supportedFields) && dim}"
                                class="ng-scope angular-ui-tree-node" 
                                collapsed="true"
                                ng-if="!collapsed">
                            </li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

我的控制器：

function geraArvoreDepartamentos() {
    angular.module('folderApp', ['ui.tree', 'ui.tree-filter', 'ui.highlight'])
    .controller('folderCtrl', function ($scope, $filter) {

        $scope.collapsed = false;

        var departamentoNomeCampo = 'title';
        var departamentoIdCampo = 'id_depto';
        var departamentosFilhosNomeCampo = 'items';

        $scope.treeFilter = $filter('uiTreeFilter');
        $scope.col_defs = [{ field: "id" }]

        $scope.toggle = function (scope) {
            $scope.collapsed = !$scope.collapsed;
        };

        function getRootNodesScope(rootId) {
            var index = -1;
            for (var i = 0, len = $scope.data.length; i < len; i++) {
                //if ($scope.data[i].id_depto === rootId) {
                if ($scope.data[i].id === rootId) {
                    index = i;
                    break;
                }
            }

            return angular.element(document.getElementById("options")).scope().$nodesScope.childNodes()[index];
        }

    }).filter('trust', function ($sce) {
        return function (val) {
            return $sce.trustAsHtml(val);
        };
    });
};

如果有人能帮助我，我将非常感激！