Angular UI树:卸下回调不发射

我正在使用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中写下删除（此）而不是removenode（this）。在两种情况下，节点都可以删除良好，但函数均未调用。

@abhishek verma

尝试修改：

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

to：

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

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

您不应该使用：

ui-tree-nodes="treeNodesOptions"

但是：

ui-tree-nodes=""

因为您没有定义$ scope.treenodesoptions

cf。Angular UI树塌陷/删除

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

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

相关内容

最新更新

热门标签：