Angular UI Tree: Entfernen Rückruf nicht feuern

Ich verwende https://github.com/angular-ui-tree/angular-ui-tree Modul. Ich habe api, dass mir Array von Dias, die Array von Gruppen sind, die Array von Graphen sind. Also ich möchte es als Baum zeichnen und Knoten entfernen Bestätigung und API Aufruf entfernt hinzufügen. Ich schrieb diesen Code Rückrufe zu testenAngular UI Tree: Entfernen Rückruf nicht feuern

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

Hier ist mein 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 ohne Probleme Brennen, aber jede von Entfernen Funktionen Brennen nicht. Auch ich habe versucht, remove (this) anstelle von removeNode (this) in html zu schreiben. Knoten werden in beiden Fällen entfernt, Funktionen werden jedoch nicht aufgerufen.

Quelle

2017-02-16 Iriskin0

Ich bin das gleiche Problem. Konnten Sie das lösen? –

Ich habe meine eigene Funktion geschrieben – Iriskin0

@Abhishek Verma

versuchen zu ändern:

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

zu:

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

Die Funktion Brennen ist nicht, weil Sie es nicht nennen, die Funktionsparameter ist eigentlich die Node-Bereich, so dass Sie von dort auf die entfernen Funktion zugreifen können.

Und Sie sollten nicht verwendet werden:

ui-tree-nodes="treeNodesOptions"

aber:

ui-tree-nodes=""

weil Sie $ scope.treeNodesOptions nicht definieren, sind

vgl Angular UI Tree collapse/remove

Quelle

2017-03-09 14:18:29 MSR

In diesem Fall denke ich, Sie müssen nur das href-Attribut in # auf Ihren Link setzen. Es war einmal nützlich für mich:

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

Quelle

2017-04-28 21:44:52

Angular UI Tree: Entfernen Rückruf nicht feuern

Antwort

Verwandte Themen