使用 angular 拖放指令的 d3

Question

我正在尝试对我的应用程序实施拖放 angular 指令以呈现 d3 可折叠树。现在我正在使用用户可以从本地机器加载文件的基本输入法。 "Input" 一切正常，渲染良好，但我有要求必须实现拖放区，所以我在互联网上找到了这个 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)return我就是我的变量

但是当我在 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) {

它return我未定义

所以我错在哪里了？

这是我的 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) {

Answer 1

只是想 post 我是如何解决这个问题的，可能有人需要它。

所以我添加了更多用于读取文件的指令，然后在控制器中将变量设置为 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) {

使用 angular 拖放指令的 d3

d3 with using angular drag and drop directive

javascript

drag-and-drop

filereader

d3.js

angularjs