Question

我正在使用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）。在这两种情况下，节点都可以正常删除，但是没有调用函数。

Answer 1

@Abhishek Verma

尝试修改：

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

为：

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

由于您没有调用该函数，因此函数未触发，函数参数实际上是节点范围，因此您可以从那里访问删除函数。

你不应该使用：

ui-tree-nodes="treeNodesOptions"

但：

ui-tree-nodes=""

因为您没有定义$ scope.treeNodesOptions

比照Angular UI Tree collapse / remove

Answer 2

在这种情况下，我认为您只需将#ref属性放入＃链接即可。这对我来说很有用：

  <a href="#" class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="removeNode(this)"></a>

Angular UI Tree：删除不触发的回调

2 个答案: