1

我正在使用https://github.com/angular-ui-tree/angular-ui-tree模块。我有 api 向我发送幻灯片数组，这些幻灯片是组数组，是图表数组。所以我想把它画成一棵树并添加节点删除确认和api调用删除。我写了这段代码来测试回调

var app = angular.module("app", ['ui.tree']);

app.controller("DashboardCtrl", function ($scope, $http, $timeout) { 
    $scope.loadData = function() {
        $http.get('http://127.0.0.1:5000/list')
        .then(function successCallback(data) {
            $scope.data = data.data;
        }, function errorCallback(response) {
        });
    }     
    $scope.remove = function (node) {
        console.log("remove " + node);
    };
    $scope.removeNode = function (node) {
        console.log("removeNode " + node);
    };
    $scope.removed = function (node) {
        console.log("removed " + node);
    };
    $scope.edit = function (node) {
        console.log("edit " + node);
    };
    $scope.newSubItem = function(node) {
        console.log(node)
    };
    $scope.loadData();
}
)

这是我的html代码：

<body ng-controller="DashboardCtrl">
<div class="container">
    <div ui-tree class="angular-ui-tree" data-drag-enabled="false" data-empty-placeholder-enabled="false">
        <ol ui-tree-nodes="treeNodesOptions" ng-model="data" class="ng-pristine ng-untouched ng-valid angular-ui-tree-nodes">
            <li ng-repeat="slide in data" ui-tree-node class="angular-ui-tree-node" collapsed="true">
                <div ui-tree-handle class="tree-node tree-node-content">
                    <a class="btn btn-success btn-xs" ng-if="slide.groups && slide.groups.length > 0" data-nodrag ng-click="toggle(this)">
                        <span class="glyphicon" ng-class="{ 'glyphicon-chevron-right': collapsed, 'glyphicon-chevron-down': !collapsed }"></span>
                    </a>
                    {{slide.title}}
                    <a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="removeNode(this)">
                        <span class="glyphicon glyphicon-remove"></span>
                    </a>
                    <a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="edit(this)">
                        <span class="glyphicon glyphicon-pencil"></span>
                    </a>
                    <a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="newSubItem(this)" style="margin-right: 8px;">
                        <span class="glyphicon glyphicon-plus"></span>
                    </a>
                </div>
                <ol ui-tree-nodes="" ng-model="slide.groups" ng-class="{hidden: collapsed}">
                    <li ng-repeat="group in slide.groups" ui-tree-node collapsed="true">
                      <div ui-tree-handle class="tree-node tree-node-content">
                          <a class="btn btn-success btn-xs" ng-if="slide.groups && slide.groups.length > 0" data-nodrag ng-click="toggle(this)">
                            <span class="glyphicon" ng-class="{ 'glyphicon-chevron-right': collapsed, 'glyphicon-chevron-down': !collapsed }"></span>
                        </a>
                        {{group.title}}
                        <a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="removeNode(this)">
                            <span class="glyphicon glyphicon-remove"></span>
                        </a>
                        <a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="edit(this)">
                            <span class="glyphicon glyphicon-pencil"></span>
                        </a>
                        <a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="newSubItem(this)" style="margin-right: 8px;">
                            <span class="glyphicon glyphicon-plus"></span>
                        </a>
                    </div>
                    <ol ui-tree-nodes="" ng-model="group.items" ng-class="{hidden: collapsed}">
                        <li ng-repeat="item in group.items" ui-tree-node collapsed="true">
                          <div ui-tree-handle class="tree-node tree-node-content">
                            {{item.title}}
                            <a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="removeNode(this)">
                                <span class="glyphicon glyphicon-remove"></span>
                            </a>
                            <a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="edit(this)">
                                <span class="glyphicon glyphicon-pencil"></span>
                            </a>
                        </div>
                    </ol>
                </li>
            </ol>
        </li>
    </ol>
</div>
</div>
</body>

$scope.newSubItem 触发没有问题，但任何删除功能都没有触发。我还尝试在 html 中编写 remove(this) 而不是 removeNode(this)。在这两种情况下，节点都可以正常删除，但函数没有调用。

4

2 回答 2

1

@Abhishek Verma

尝试修改：

$scope.removeNode = function (node) {
   console.log("removeNode " + node);
};

至：

$scope.removeNode = function (scope) {
  scope.remove();
};

该函数没有触发，因为您没有调用它，函数参数实际上是节点范围，因此您可以从那里访问remove 函数。

你不应该使用：

ui-tree-nodes="treeNodesOptions"

但：

ui-tree-nodes=""

因为你没有定义 $scope.treeNodesOptions

参看。Angular UI 树折叠/删除

于 2017-03-09T14:18:29.683 回答
0

在这种情况下，我认为您只需要将 # 中的 href 属性添加到您的链接中。曾经对我有用：

  <a href="#" class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="removeNode(this)"></a>
于 2017-04-28T21:44:52.287 回答