如何在 Angular UI 树上调用 collapseAll 函数? [英] How to call collapseAll function on Angular UI tree?

问题描述

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

搜索 Google 时出现了这个问题，其中有人要求准确同样的事情 - 不幸的是，链接的答案导致 404.

我不明白的是:如果这个函数可以通过 ui-tree 指令的范围访问，但是这个指令使用它自己的隔离范围，那么有效地访问该函数意味着访问该指令的范围.我如何到达那个范围?

我知道如何从上面要求一个控制器(在指令中使用 ^ 语法)，但我如何访问下面的范围?

解决方案

in basic-example.html
由 div ng-controller="BasicExampleCtrl"

包裹

 
<div class="col-sm-12"><h3>基本示例</h3><button ng-click="expandAll()">全部展开</button><button ng-click="collapseAll()">全部折叠</button>

<div class="row"><div class="col-sm-6"><div ui-tree id="tree-root"><ol ui-tree-nodes ng-model="数据"><li ng-repeat="数据中的节点" ui-tree-node ng-include="'nodes_renderer.html'"></li></ol>

在 basic-example.js 中

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

I am using the angular-ui-tree directive to show a tree in my AngularJS application. However, I would now like to collapse the tree. The documenation states that there is a function called collapseAll on the scope, but doesn't show an example of how to call this.

Searching Google has brought up this issue where someone asks for exactly the same thing - unfortunately the linked answer results in a 404.

What I don't get is: If this function is accessible via the scope of the ui-tree directive, but this directive uses its own isolated scope, accessing the function effectively means accessing the directive's scope. How do I get to that scope?

I know how to require a controller from above (using the ^ syntax in a directive), but how do I access a scope below?

解决方案

in basic-example.html
wrap by 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>

in 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');
      };
      ...
}]);

这篇关于如何在 Angular UI 树上调用 collapseAll 函数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！