Question

我在angular中创建了两个指令，每个指令都使用jQuery UI的draggable和droppable。两者的事件都很好。当我尝试基于droppable元素更新视图时，会发生一些奇怪的事情。与这两个事件唯一真正的区别在于，当拖动项停止时，可拖动的“停止”事件触发一次，而拖动项目已经丢弃的每个可投放项目的首次触发“放置”事件。

（以下是一些背景信息：应用程序是一个彩色浏览器，其中可拖动项目是一个放大镜，可放置的项目是网格中的小颜色样本。放大镜用于在拖动停止时选择一些颜色。）

angular.module('colorBrowserApp.directives',[])

.directive('ngDraggable', ['$state', function($state) {

        return {
            restrict: 'A',
            link: function(scope, element, attrs) {


                element.draggable({
                    'containment': 'parent',
                    'stop': function(event, ui) {
                        // when dragging stops, clear the main grid and update with selection
                        scope.$parent.colors = [];
                        scope.$apply(); // this successfully updates the view to show 0 items
                    }
                })
            }
        };
    }])


.directive('ngDroppable', ['$state', function($state) {

        return {
            restrict: 'A',
            link: function(scope, element, attrs) {
                element.droppable({
                    'accept': '.loupe',
                    'tolerance': 'touch',  // Draggable overlaps the droppable entirely
                    'drop' : function(event, ui) {

                            console.log(scope.$parent.colors.length); // this shows 400, which is correct
                            scope.$parent.colors = [];
                            scope.$apply();
                            console.log(scope.$parent.colors.length); // this shows 0, which is correct, but the view still holds the 400 items

                    }
                })
            }
        };
    }])

角度范围更改不更新视图

0 个答案: