nickperkinslondon angular treeview expand_all() problems



我正在使用这个角度树视图项目:

https://github.com/nickperkinslondon/angular-bootstrap-nav-tree

我认为这个树视图没有在树视图上进行搜索的功能,所以我使用一个表单来编写要查找的标签来实现我的功能。

<form name="searchForm" novalidate style="margin-bottom: 50px">
<div> <input ng-model="search" type="text" class="form-control" placeholder="Buscar..." name="searchTerm" required /> 
</div> 
</form>

这个表单有一个.watch来检测用户何时写一些文本:

$scope.$watch('search', function(newTerm, oldTerm) {
filteredResponse = !newTerm ? response : updateFilteredResponse(normalize(newTerm));
updateTree();
}, true);

函数"updateFilteredResponse"在原始数据集(从json读取)上过滤标签包含newTerm的节点,并返回一个数组,其中包含要在树视图中显示的项。

"updateTree"函数使用此数组,并将数组中的自定义项转换为要添加到树视图中的树视图项。此项目已添加到$scope.tree_data=[];

这个数组就是使用abn-tree指令的数组:

<abn-tree tree-data="tree_data" tree-control="my_tree" ng-if="loaded" expand-level = "2"></abn-tree>

这部分工作正常。我的问题来了,当结果树视图显示在屏幕上时,树视图总是看起来完全崩溃。

如果我放一个类似于库的按钮,示例代码如下:

<div style="vertical-align:top">
<button ng-click="my_tree.expand_all()" class="btn btn-default btn-sm">Expand All</button>
</div>

并在控制器中声明这一点作为示例:

var tree;
$scope.my_tree = tree = {};

当用户单击按钮以展开所有搜索结果时,效果良好。我需要在搜索后自动展开树视图,并删除"全部展开"按钮。

为此,我尝试在控制器中调用my_tree.exexpand_all()。我试过不同的电话:

$scope.my_tree.expand_all();
tree.expand_all();

在我的控制器和html的不同部分(使用ngIf和onload指令)。甚至我也试图在准备var时对$scope.my_tree进行"监视",以尝试使用expand_all()函数,但我总是遇到同样的错误:

$scope.my_tree.expand_all is not a function

有人能帮我吗?

您可以将expand_all()函数放入setTimeout函数中,如下所示。

setTimeout(function() {            
$scope.my_tree.expand_all();
$scope.$digest();
}, 0);      

它必须这样做,因为在将数据绑定到树视图时需要一些延迟时间。

最新更新