Angular UI樹：刪除回調不開火

我使用https://github.com/angular-ui-tree/angular-ui-tree模塊。我有一個API，發送幻燈片數組，這是一組圖組。所以我想繪製它作爲一棵樹，並添加節點刪除確認和API調用刪除。我寫了這個代碼來測試回調Angular UI樹：刪除回調不開火

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）。在這兩種情況下節點都很好，但功能沒有調用。

來源

2017-02-16 Iriskin0

我是有同樣的問題。你能解決這個問題嗎？ –

我寫了自己的功能 – Iriskin0

@Abhishek維爾馬

嘗試修改：

$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

來源

2017-03-09 14:18:29 MSR

在這種情況下，我認爲你只需要把href屬性放在你的鏈接＃中。這對我有用一次：

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

來源

2017-04-28 21:44:52

Angular UI樹：刪除回調不開火

回答

相關問題