0
我正在使用我正在使用的： http://angular-ui-tree.github.io/angular-ui-tree/#/connected-trees 我希望能夠在父級別上拖動，但不能在樹中的子級別上拖動。在樹中拖動連接的樹n防止下拉
我該如何去做。我使用自己的代碼，現在，我可以把這裏
HTML
<!-- Nested node template -->
<script type="text/ng-template" id="nodes_renderer1.html">
<div ui-tree-handle class="tree-node tree-node-content">
<div class="tree-node-content">
<a class="btn btn-success btn-xs" data-nodrag ng-click="toggle(this)"><span class="glyphicon" ng-class="{'glyphicon-chevron-right': collapsed, 'glyphicon-chevron-down': !collapsed}"></span></a>
{{node.title}}
<a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="remove(this)"><span class="glyphicon glyphicon-remove"></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>
</div>
<ol ui-tree-nodes="" ng-model="node.nodes" ng-class="{hidden: collapsed}">
<li ng-repeat="node in node.nodes" ui-tree-node ng-include="'nodes_renderer1.html'">
</li>
</ol>
</script>
<script type="text/ng-template" id="nodes_renderer2.html">
<div class="tree-node">
<div class="pull-left tree-handle" >
<span class="glyphicon glyphicon-list"></span>
</div>
<div class="tree-node-content">
<a class="btn btn-success btn-xs" data-nodrag ng-click="toggle(this)">
<span class="glyphicon" ng-class="{
'glyphicon-chevron-right': collapsed,
'glyphicon-chevron-down': !collapsed
}">
</span>
</a>
{{node.title}}
<a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="remove(this)"><span class="glyphicon glyphicon-remove"></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>
</div>
<ol ui-tree-nodes="" ng-model="node.nodes" ng-class="{hidden: collapsed}">
<li ng-repeat="node in node.nodes" ui-tree-node ng-include="'nodes_renderer2.html'">
</li>
</ol>
</script>
<div class="row">
<div class="col-sm-12">
<h3>Connected Trees</h3>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<h3>Tree 1</h3>
<div ui-tree id="tree1-root">
<ol ui-tree-nodes="" ng-model="tree1">
<li ng-repeat="node in tree1" ui-tree-node ng-include="'nodes_renderer1.html'"></li>
</ol>
</div>
</div>
<div class="col-sm-6">
<h3>Tree 2</h3>
<div ui-tree id="tree2-root">
<ol ui-tree-nodes="" ng-model="tree2">
<li ng-repeat="node in tree2" ui-tree-node ng-include="'nodes_renderer2.html'"></li>
</ol>
</div>
</div>
</div>
<h3>Data binding</h3>
<div class="row">
<div class="col-sm-6">
<pre class="code">{{ tree1 | json }}</pre>
</div>
<div class="col-sm-6">
<pre class="code">{{ tree2 | json }}</pre>
</div>
</div>
和控制器是
(function() {
'use strict';
angular.module('demoApp')
.controller('ConnectedTreesCtrl', ['$scope', function ($scope) {
$scope.remove = function (scope) {
scope.remove();
};
$scope.toggle = function (scope) {
scope.toggle();
};
$scope.newSubItem = function (scope) {
var nodeData = scope.$modelValue;
nodeData.nodes.push({
id: nodeData.id * 10 + nodeData.nodes.length,
title: nodeData.title + '.' + (nodeData.nodes.length + 1),
nodes: []
});
};
$scope.tree1 = [{
'id': 1,
'title': 'tree1 - item1',
'nodes': []
}, {
'id': 2,
'title': 'tree1 - item2',
'nodes': []
}, {
'id': 3,
'title': 'tree1 - item3',
'nodes': []
}, {
'id': 4,
'title': 'tree1 - item4',
'nodes': []
}];
$scope.tree2 = [{
'id': 1,
'title': 'tree2 - item1',
'nodes': []
}, {
'id': 2,
'title': 'tree2 - item2',
'nodes': []
}, {
'id': 3,
'title': 'tree2 - item3',
'nodes': []
}, {
'id': 4,
'title': 'tree2 - item4',
'nodes': []
}];
}]);
}());
感謝
**我曾嘗試**
這就是我試過的
$scope.tree2Options = {
beforeDrop : function (e) {
//console.log("sent from tree 2");
var destValue = e.dest.nodesScope.node ? e.dest.nodesScope.node.value : "pata nehi";
//console.log(destValue);
},
accept: function(sourceNodeScope, destNodesScope, destIndex) {
//console.log("tree 2 before accepting ");
console.log(destNodesScope.$element.attr('data-type'));
return true
}
};
然後
<div class="col-sm-6">
<h3>Tree 2</h3>
<div data-ui-tree="tree2Options" id="tree2-root">
<ol ui-tree-nodes="" ng-model="tree2" data-type="{{tree2.id}}">
<li ng-repeat="node in tree2" ui-tree-node ng-include="'nodes_renderer2.html'"></li>
</ol>
</div>
</div>
但不執行console.log沒有給我任何IDS或任何東西。我在想添加屬性，然後檢查它
**哈克修復**
，所以我做了這裏面還挺修復它，但它非常哈克......我還需要知道爲什麼我不能得到id和爲什麼這個工程...基本上，如果我從node []節點下降，所以它有id未定義，它給出了未定義，我檢查那..它完成了工作，但我討厭它的如此hacky
accept: function(sourceNodeScope, destNodesScope, destIndex) {
//console.log("tree 2 before accepting ");
console.log(destNodesScope.$element.attr('data-type'));
if(destNodesScope.$element.attr('data-type') != 'undefined'){
//return true
console.log("true");
return true;
}else{
console.log("flase");
return false;
}
}