Javascript 角度UI树：删除未触发的回调_Javascript_Angularjs_Angular Ui Tree

Javascript 角度UI树：删除未触发的回调

javascript angularjs

Javascript 角度UI树：删除未触发的回调,javascript,angularjs,angular-ui-tree,Javascript,Angularjs,Angular Ui Tree,我正在使用模块。我有一个api，它向我发送幻灯片数组，这是组数组，这是图形数组。所以我想把它画成一棵树，并在移除时添加节点移除确认和api调用。我写这段代码是为了测试回调 var app = angular.module("app", ['ui.tree']); app.controller("DashboardCtrl", function ($scope, $http, $timeout) { $scope.loadData = function() { $ht

我正在使用模块。我有一个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>



{{slide.title}}

{{group.title}}

{{item.title}

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

@Abhishek Verma

尝试修改：

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

致：

函数没有启动是因为您没有调用它，函数参数实际上是节点作用域，因此您可以从那里访问删除函数
您不应使用：

ui-tree-nodes="treeNodesOptions"
但是：
因为您没有定义$scope.treeNodeOptions

cf.
在本例中，我认为您只需将href属性放入链接中即可。它曾经对我很有用：

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

我也有同样的问题。你能解决这个问题吗？我写了我自己的函数
ui-tree-nodes=""

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