Angular 1.5 中的拖放问题答案

【问题标题】：Drag and drop issues in angular 1.5Angular 1.5 中的拖放问题
【发布时间】：2018-12-20 07:45:00
【问题描述】：

我有一个 div，它是一个可拖动的元素。它应该在拖动时放在组件上，我们应该显示它正在放置的数字。我做了附加的屏幕截图。

我正在使用 angular 指令进行拖放，下面是代码。我只是想知道我可以从指令中触发 showLineEffect 方法，但 dropProperties 没有在 UI 中更新，但在控制台中它在拖动时显示更新的值。

我尝试了ng-mouseover 事件，但是当我们持有和元素时它不起作用。如果有其他解决方案，请告诉我。

控制器：

var vm= this;
    vm.dropProperties = {
            showLine: false,
            indentLeft: 0,
            indentRight: 0,
            totalWidth: 10,
            totalHeight: 32,
            startMonth: 0
        };

    vm.showLineEffect = function (event) {
            vm.dropProperties.showLine = true;
            vm.dropProperties.startMonth = Math.round((event.clientX - 160) / 48);
            console.log($ctrl.dropProperties +"changed");

        }

指令：

app.directive('dragOppSol',
function dragOppSol() {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.prop('draggable', true);
            element.on('dragstart', function (event) {
            console.log("drag started");
                //event.dataTransfer.setData('text', event.target.id)
            });
        }
    };
}
);
app.directive('dropOppSol',
function dropOppSol() {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.on('dragover', function (event) {
                event.preventDefault();
                //console.log("test change" + scope.ctrl.dropProperties.startMonth);
                scope.ctrl.showLineEffect(event);



                // Implementation of CSS

            });
            element.on('drop', function (event) {
                event.preventDefault();


            });
        }
    };
});

【问题讨论】：

标签： angularjs angularjs-directive drag-and-drop

【解决方案1】：

在scope.ctrl.showLineEffect(event)之后添加$scope.$apply()；或在 vm.showLineEffect 中。

$scope.$apply ~~告诉 Angular 它应该检查和更新所有 html 绑定。

任何 ng-smth，例如 ng-click、ng-mouseover、ng-keydown... 都可以：

eval_and_run(expression)
$scope.$apply()

【讨论】：