私は使用しています: http://angular-ui-tree.github.io/angular-ui-tree/#/connected-trees 親レベルではドラッグできるようにしたいが、子レベルではドラッグできないようにしたい木。
どうすればそれについて行くでしょうか。私は今ここに置くことができる彼らのコードを使用しています
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 には ID などは何も表示されません。属性を追加してから確認することを考えていました
**ハッキーな修正**
だから私はこれをちょっと修正しましたが、それは非常にハックです...なぜIDを取得できないのか、なぜこれが機能するのかを知る必要があります...未定義を返し、それをチェックします..これで仕事は完了しますが、とてもハックなので嫌いです
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;
}
}