【发布时间】：2016-03-16 21:16:33
【问题描述】：
我正在尝试对我的应用程序实现拖放角度指令，以呈现 d3 可折叠树。现在我正在使用基本的输入法，用户可以从本地机器加载文件。使用“输入”，一切正常，渲染良好，但我有必须实现放置区的要求，所以我在互联网上找到了这个example，因为已经为图像提供了示例，我做了一些修改它用于 json 文件：
<div id="left-input" class="dropzone" file-dropzone="[application/json]" file="json" file-name="applicationFileName" data-max-file-size="3">
<span>Drop Image Here</span></div>
<span class="dropzone">{{applicationFileName}}</span>
并为 d3 库设置它，但我如何通过 console.log 看到我的变量不足，所以如果我在指令中检查变量：
reader = new FileReader();
reader.onload = function(evt) {
scope.file = evt.target.result;
console.log(scope.file);
if (checkSize(size) && isTypeValid(type)) {
return scope.$apply(function() {
scope.file = evt.target.result;
if (angular.isString(scope.fileName)) {
return scope.fileName = name;
}
});
}
};
所以 console.log(scope.file) 准确地返回我的变量
但是当我在 d3 函数内部的控制器中使用这个变量时：
$scope.load_left = function () {
// Get JSON data
console.log('['+ $scope.file +']');
root = $scope.file;
treeData = JSON.parse(root);
//d3.json($scope.result, function (error, treeData) {
它返回我未定义
那我错在哪里了？
这是我的 dnd 指令：
app.directive('fileDropzone', function() {
return {
restrict: '',
scope: {
file: '=',
fileName: '='
},
link: function(scope, element, attrs) {
var checkSize, isTypeValid, processDragOverOrEnter, validMimeTypes;
processDragOverOrEnter = function(event) {
if (event != null) {
event.preventDefault();
}
event.dataTransfer.effectAllowed = 'copy';
return false;
};
validMimeTypes = attrs.fileDropzone;
checkSize = function(size) {
var _ref;
if (((_ref = attrs.maxFileSize) === (void 0) || _ref === '') || (size / 1024) / 1024 < attrs.maxFileSize) {
return true;
} else {
alert("File must be smaller than " + attrs.maxFileSize + " MB");
return false;
}
};
isTypeValid = function(type) {
if ((validMimeTypes === (void 0) || validMimeTypes === '') || validMimeTypes.indexOf(type) > -1) {
return true;
} else {
alert("Invalid file type. File must be one of following types " + validMimeTypes);
return false;
}
};
element.bind('dragover', processDragOverOrEnter);
element.bind('dragenter', processDragOverOrEnter);
return element.bind('drop', function(event) {
var file, name, reader, size, type;
if (event != null) {
event.preventDefault();
}
reader = new FileReader();
reader.onload = function(evt) {
scope.file = evt.target.result;
console.log(scope.file);
if (checkSize(size) && isTypeValid(type)) {
return scope.$apply(function() {
scope.file = evt.target.result;
if (angular.isString(scope.fileName)) {
return scope.fileName = name;
}
});
}
};
console.log('['+ scope.file +']');
file = event.dataTransfer.files[0];
//console.log('['+ file +']');
name = file.name;
type = file.type;
size = file.size;
reader.readAsText(file);
//reader.readAsDataURL(file);
return false;
});
}
};
});
通过这个函数，我正在渲染我的 d3 树
$scope.load_left = function () {
// Get JSON data
console.log('['+ $scope.file +']');
root = $scope.file;
treeData = JSON.parse(root);
//d3.json($scope.result, function (error, treeData) {
我还用我的旧输入法提供代码
<div style="display: flex">
<input type="file" id="left-input"/>
<button class="btn btn-info" ng-click="load_left()">Load It</button>
</div>
$scope.leftWindow = function (e) {
var file = e.target.files[0];
if (!file) {
return;
}
var reader = new FileReader();
reader.onload = function (e) {
var leftcontent = e.target.result;
displayLeftContents(leftcontent);
};
reader.readAsText(file);
};
function displayLeftContents(leftcontent) {
$scope.leftContent = JSON.parse(leftcontent);
$scope.$apply();
}
document.getElementById('left-input')
.addEventListener('change', $scope.leftWindow, false);
$scope.load_left = function () {
// Get JSON data
root = JSON.stringify($scope.leftContent);
//console.log('['+ root +']');
treeData = JSON.parse(root);
//console.log(treeData);
//d3.json($scope.result, function (error, treeData) {
【问题讨论】：
标签： javascript angularjs d3.js drag-and-drop filereader