angular-tree-control へのドラッグ アンド ドロップ機能の追加に取り組んでいます: https://github.com/wix/angular-tree-control
親スコープのデータを、各ノードのテンプレートで作成した要素にバインドしようとしています。ただし、ノードの分離されたスコープにより、この情報を渡すことが難しくなります。分離スコープ定義 (スコープ: {files: "="}) を介して属性を追加し、html にファイルを設定しました。それにもかかわらず、 ng-model="files" を使用すると、データが変更されないか、変更がメインスコープに到達しません。
変更が表示されないわけではありません。別のAngularアプリケーション(ng-file-upload)からの監視トリガーは、クライアントからメインの(分離されていない)スコープデータを変更するとオフになり、アップロードファイル関数を呼び出すはずですが、それは起こりません。データが親スコープから正しくバインドされている場合は、ローカル スコープのプロパティが変更されたときに親スコープのプロパティが変更されるため、watch 関数がトリガーされる必要があります。これで十分でない場合は、さらに説明や説明を追加できます。
ここに私のHTMLコードがあります:
<div treecontrol class="tree-classic"
tree-model="dataForTheTree"
files="files"
options="treeOptions"
on-selection="showSelected(node)"
selected-node="node1">
<span ngf-drop ngf-select ng-model="files" ngf-drag-over-class="dragover" ngf-multiple="true" ngf-allow-dir="true">
{{node.ObjectName}} {{node.FileSize}} {{files}} </span>
</div>
これが私のJavascriptです:
$scope.getserver = function () {
// Simple POST request example (passing data) :
$http.post('/api/tree/download', { "Url": "" }).
success(function (data, status, headers, config) {
// this callback will be called asynchronously
// when the response is available
$scope.dataForTheTree = JSON.parse(JSON.stringify(data));
$scope.log += JSON.stringify(data);
}).
error(function (data, status, headers, config) {
$scope.log += "error getting file structure";
// called asynchronously if an error occurs
// or server returns response with an error status.
});
}
$scope.$watch('files', function () {
$scope.upload($scope.files);
});
$scope.upload = function (files) {
// upload code goes here
}
angular-tree-control.js に対する私の編集は次のとおりです。
scope: {
treeModel: "=",
selectedNode: "=?",
selectedNodes: "=?",
expandedNodes: "=?",
onSelection: "&",
onNodeToggle: "&",
options: "=?",
orderBy: "@",
reverseOrder: "@",
filterExpression: "=?",
filterComparator: "=?",
done: "&",
//this is my edit
files: "="
}