我尝试将拖放角度指令实现到我的应用程序，以呈现d3可折叠树。现在我使用基本的输入法，用户可以从本地机器加载文件。并使用＆＃34;输入＆＃34;一切正常并且渲染得很好，但是我已经有了实施放置区的要求，所以我在互联网上找到了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) {
答案 0 :(得分：0)
只想发布我是如何解决这个问题的，可能有人需要它。
所以我添加了更多指令来读取文件，然后在控制器内部设置变量为d3函数，所以完整代码如下：
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);
//console.log(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.$apply(function() {
$LeftfileDrop = evt.target.result;
$RightfileDrop = evt.target.result;
});
if (checkSize(size) && isTypeValid(type)) {
return scope.$apply(function() {
scope.file = evt.target.result;
if (angular.isString(scope.fileName)) {
return scope.fileName = name;
}
});
}
};
file = event.dataTransfer.files[0];
console.log(file);
name = file.name;
type = file.type;
size = file.size;
reader.readAsText(file);
return false;
});
}
};
});
app.directive('onReadFile', function ($parse) {
return {
restrict: 'A',
scope: false,
link: function(scope, element, attrs) {
var fn = $parse(attrs.onReadFile);
element.on('change', function(onChangeEvent) {
var reader = new FileReader();
reader.onload = function(onLoadEvent) {
scope.$apply(function() {
fn(scope, {$fileContent:onLoadEvent.target.result});
});
};
reader.readAsText((onChangeEvent.srcElement || onChangeEvent.target).files[0]);
});
}
};
});
和d3功能：
// Get JSON data
root = $LeftfileDrop;
treeData = JSON.parse(root);
//d3.json($scope.result, function (error, treeData) {