Question

我正在研究Angular 1中的项目。任务是从json对象做一个DOM树，并通过本机拖动来操纵它，然后删除DOM操作（带有jQuery等等）。我已经完成了解析json-＆gt; dom函数，从服务器加载json，一些拖放事件处理程序。现在我的问题是当我完成DROP事件时如何更新json对象（从这个对象得到一个ul＆gt; li树结构）。现在，代码

查看

<div ng-controller="TreeController">
        <ng-dom-tree 
            style="background-color: #000" 
            ng-model = "treeJson"
            class="tree" 
            ng-draggable 
            ng-droppable>
        </ng-dom-tree>
</div>

控制器

.controller('TreeController', TreeController);

TreeController.$inject = ['treeService', '$scope'];

function TreeController(treeService, $scope) {

    $scope.treeJson = '';
    treeService.getTree().success(function (data) {
        $scope.treeJson = data;
    });
}

主要指令

.directive('ngDomTree', ngDomTree)
ngDomTree.$inject = [];
function ngDomTree() {
    var isEmpty = function (object) {
        for (var key in object) {
            return false;
        }
        return true;
    };
    function createTree(tree, list) { /*creating tree -> json to dom*/}
    return {
        restrict: 'E',
        replace: true,
        link: function (scope, elt, attrs) {
            scope.$watch('treeJson', function (data) {
                if (isEmpty(data))
                    return;
                **CAN'T HANDLE DATA CHANGING HERE**
                elt.append(document.createElement('ul'));
                createTree(data, document.getElementsByTagName('ul')[0]);
            });

        }
    }
}

Sup指令

.directive('ngDroppable', ngDroppable)
ngDroppable.$inject = [];
function ngDroppable() {
    var parseTreeToJson = function(tree){/* dom to json */}
    return {
        restrict: 'A',
        link: function (scope, elt, attrs) {
            elt.on('mouseover', function (e) {

                var droppableElt = e.target || event.target;
                if (!droppableElt.classList.contains('tree__node') && !droppableElt.classList.contains('tree__branch'))
                    return;

                droppableElt.addEventListener(
                    'dragover',
                    function (e) {

                        this.classList.add('navigator');
                        e.dataTransfer.dropEffect = 'move';
                        if (e.preventDefault)
                            e.preventDefault();
                        this.classList.add('over');
                        return false;
                    },
                    false
                );

                droppableElt.addEventListener(
                    'dragenter',
                    function (e) {
                        this.classList.add('over');
                        return false;
                    },
                    false
                );

                droppableElt.addEventListener(
                    'dragleave',
                    function (e) {
                        this.classList.remove('over');
                        this.classList.remove('navigator');
                        return false;
                    },
                    false
                );

                droppableElt.addEventListener(
                    'drop',
                    function (e) {

                        if (e.stopPropagation) e.stopPropagation();
                        this.classList.remove('over');
                        let item = document.getElementById(e.dataTransfer.getData('Text'));

                        this.appendChild(item);
                        item.id = '';
                        //updating here
                        scope.treeJson = parseTreeToJson(elt[0].children[0]); 

                        return false;
                    },
                    false
                );
            });
        }
    }
}

所以，在Sup指令中创建了 drop 事件，并且我重新启动了 treeJson 变量，之后我需要在main指令中重新初始化树，并且控制器从这个变量中获取新的json结构，因为使用了$ watch，但它并没有发生。

请帮助

注意事项：）

P.S。 Here it is in Plnkr.co

Answer 1

由于您使用的是本机DOM，它会绕过angular的处理器。在更改角度状态后，您需要调用scope.$digest()以告知它发生了变化。

droppableElt.addEventListener(
    'drop',
    function (e) {

        if (e.stopPropagation) e.stopPropagation();
        this.classList.remove('over');
        let item = document.getElementById(e.dataTransfer.getData('Text'));
        this.appendChild(item);
        item.id = '';
        scope.treeJson = parseTreeToDOM(elt[0].children[0]);
        scope.$digest();
    },
    false
);

在Angular

1 个答案: