Angular UI Tree: remove callback not firing

Question

I'm using https://github.com/angular-ui-tree/angular-ui-tree module. I have api that sending me array of slides, which are array of groups, which are array of graphs. So I want to draw it as a tree and add node remove confirmation and api call on removed. I wrote this code to test callbacks

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();
}
)

Here is my html code:

<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 firing with no problem, but any of remove functions not firing. Also I tried to write remove(this) instead of removeNode(this) in html. Nodes are removing fine in both cases but functions not calling.

I am the having same issue. Were you able to resolve this ?

Abhishek Verma
– Abhishek Verma

2017-03-06 06:48:54 +00:00
Commented Mar 6, 2017 at 6:48 — Abhishek Verma
– Abhishek Verma, Commented Mar 6, 2017 at 6:48
I wrote my own function

Iriskin0
– Iriskin0

2017-04-06 06:17:22 +00:00
Commented Apr 6, 2017 at 6:17 — Iriskin0
– Iriskin0, Commented Apr 6, 2017 at 6:17

Community · Accepted Answer · 2017-05-23 10:31:29Z

1

@Abhishek Verma

try to modify:

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

to:

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

The function is not firing because you're not calling it, the function parameter is actually the node scope so you can access the remove function from there.

And you should not use:

ui-tree-nodes="treeNodesOptions"

but:

ui-tree-nodes=""

because you are not defining $scope.treeNodesOptions

cf. Angular UI Tree collapse / remove

edited May 23, 2017 at 10:31

CommunityBot

11 silver badge

answered Mar 9, 2017 at 14:18

MSR974

6923 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alfredo Zamudio · Accepted Answer · 2017-05-02 13:28:24Z

0

In this case I think you just need to put the href attribute in # to your link. It was useful to me once:

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

edited May 2, 2017 at 13:28

answered Apr 28, 2017 at 21:44

Alfredo Zamudio

4283 silver badges13 bronze badges

Collectives™ on Stack Overflow

Angular UI Tree: remove callback not firing

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related