Question

我正在使用angular-ui-tree指令在我的AngularJS应用程序中显示一棵树。但是，我现在想要折叠树。该文档声明在作用域上有一个名为collapseAll的函数，但没有显示如何调用它的示例。

搜索Google已经提出this issue，有人要求完全相同的事情 - 不幸的是，链接的答案会产生404。

我没有得到的结果是：如果可以通过ui-tree指令的范围访问此函数，但该指令使用自己的隔离范围，则有效访问函数意味着访问指令的范围。我如何进入该范围？

我知道如何从上面要求控制器（在指令中使用^语法），但如何访问下面的范围？

Answer 1

在basic-example.html中由div ng-controller =“BasicExampleCtrl”

包装

  <div class="row">
      <div class="col-sm-12">
          <h3>Basic Example</h3>
          <button ng-click="expandAll()">Expand all</button>
          <button ng-click="collapseAll()">Collapse all</button>
      </div>
  </div>
  <div class="row">
      <div class="col-sm-6">
          <div ui-tree id="tree-root">
              <ol ui-tree-nodes ng-model="data">
                  <li ng-repeat="node in data" ui-tree-node ng-include="'nodes_renderer.html'"></li>
              </ol>
          </div>
      </div>
  </div>

在basic-example.js

中

angular.module('demoApp')
    .controller('BasicExampleCtrl', ['$scope', function ($scope) {
      ...
      $scope.collapseAll = function () {
        $scope.$broadcast('angular-ui-tree:collapse-all');
      };

      $scope.expandAll = function () {
        $scope.$broadcast('angular-ui-tree:expand-all');
      };
      ...
}]);

Answer 2

您可以在./demo/dist/中使用库不要在./dist

中使用库

我遇到了同样的问题。

你可以在./demo/dist /

中看到demo tree.html并查看angular-ui-tree.js

http://jimliu.github.io/angular-ui-tree/tree.html

Answer 3

This官方演示展示了如何使用collapseAll。

请注意，还有一个额外的tree.js，

var getRootNodesScope = function() {
  return angular.element(document.getElementById("tree-root")).scope();
};

$scope.collapseAll = function() {
  var scope = getRootNodesScope();
  scope.collapseAll();
};

Answer 4

我理解这个帖子现在已经很老了，但我觉得这个问题还没有被完全回答。当我正在寻找相同的解决方案但没有成功 - 直到我手动尝试每个可用的孩子＆＃39;相关函数提供了ui-tree范围。访问ui-tree根节点的第一级子范围的能力可以这样做：

首先确保您已声明了＆＃39; id＆＃39;根节点。例如，以下示例中设置的Id

<div ui-tree>
  <ol ui-tree-nodes="" ng-model="data" id="tree-root">
    <li ng-repeat="node in data" ui-tree-node ng-nclude="'nodes_renderer.html'"></li>
  </ol>
</div>

然后像这样访问ui-tree根目录

var uiTreeScope = angular.element(document.getElementById("tree-root")).scope();
var childNodes = uiTreeScope.childNodes();

返回的变量＆＃39; childNodes＆＃39;是所有子节点范围的数组。这样可以访问作为根节点子节点的所有节点。请注意，您可以多次执行此操作以关闭树的多个层或节点级别。

旁注：我不确定您是否尝试过此操作，但此范围对于折叠ui-tree节点的特定级别的层或节点级别也很有用 - 例如：

_.each(childNodes, function (c) { c.collapse() });

如果您不熟悉＆＃34; _。＆＃34;在这种情况下，它只是一个＆＃39; foreach＆＃39;循环 - 使用库http://underscorejs.org/

Answer 5

由于某些原因，我遇到了演示问题，并且无法使用collapseAll（）。相反，我只是添加了＆＃34; ui-tree-handle＆＃34;每个ui-tree-handle指令div的类，并执行扩展/折叠到每个独特的范围。对于父控制器，添加包含ng-click =＆＃34; ctrl.collapseAll（）＆＃34;的按钮：

    var vm = this;
    vm.collapseAll = function(){
        var elems = document.getElementsByClassName("ui-tree-handle");
        for(var i=0; i < elems.length; i++){
            angular.element(elems[i]).scope().collapse();
        }
    }
    vm.expandAll = function(){
        var elems = document.getElementsByClassName("ui-tree-handle");
        for(var i=0; i < elems.length; i++){
            angular.element(elems[i]).scope().expand();
        }
    }

如何在Angular UI树上调用collapseAll函数？

5 个答案: