Question

我有两个指令，draggable和droppable。指令本身将jquery ui函数应用于元素。我的可拖动项目位于一个控制器中，该控制器具有一个带有可放置div的父控制器。如何将项目从子控制器项列表中删除到父控制器列表。同时从屏幕上的可拖动列表中删除该项目并增加可放置的div长度。

我已经设置了一个jsfiddle，

http://jsfiddle.net/huNpS/1/

HTML

<body ng-app="myApp">
    <div ng-controller="parentCtrl">
        <div id="dropzone" data-index="1" droppable>
            {{dropped_items.length}}
        </div>
        <div ng-controller="childCtrl">
            <div ng-repeat="item in items"
                data-index="{{$index}}" class="note" draggable>
                    {{item.title}}
            </div>
        </div>
    </div>
</body>

的Javascript

var app = angular.module('myApp', []);

app.controller('parentCtrl', function ($scope){
    var dropped = [
            {id:1, title:'Note 1'},
            {id:2, title:'Note 2'},
            {id:3, title:'Note 3'}
        ];
    $scope.dropped_items = dropped;

});

app.controller('childCtrl', function ($scope){
    var data = [
            {id:4, title:'Note 4'},
            {id:5, title:'Note 5'},
            {id:6, title:'Note 6'},
            {id:7, title:'Note 7'},
            {id:8, title:'Note 8'}
        ];

    $scope.items = data;

});

app.directive('draggable', function() {
    return {
        restrict:'A',
        link: function(scope, element, attrs) {
            element.draggable({
                revert:true
            });
        }
    };
});


app.directive('droppable', function($compile) {
    return {
        restrict: 'A',
        link: function(scope,element,attrs){
            element.droppable({
                drop:function(event,ui) {
                    var dragIndex = angular.element(ui.draggable).data('index');
                    var dropIndex = angular.element(this).data('index');
                    console.log(dragIndex);
                    console.log(dropIndex);

                    console.log(scope);
                    scope.$apply();
                }
            });
        }
    };
});

Answer 1

你的jsfiddle似乎不起作用。最快的解决办法就是不要使用子控制器。然后你应该有权访问相同的范围。你真的需要吗？

如果你这样做，你可以为此设置事件，并在$ rootScope上使用$ .emit或$ .broadcast，然后在childCtrl上设置一个监听器，一旦丢弃，它将从列表中删除它。

编辑：

现在jsfiddle正在运行，请查看：http://jsfiddle.net/huNpS/2/

我删除了childCtrl并使代码执行了我认为你想要的代码：

var app = angular.module('myApp', []);

app.controller('parentCtrl', function ($scope) {
    $scope.dropped_items = [
        {id: 1, title: 'Note 1'},
        {id: 2, title: 'Note 2'},
        {id: 3, title: 'Note 3'}
    ];

    $scope.items = [
        {id: 4, title: 'Note 4'},
        {id: 5, title: 'Note 5'},
        {id: 6, title: 'Note 6'},
        {id: 7, title: 'Note 7'},
        {id: 8, title: 'Note 8'}
    ];


});

app.directive('draggable', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.draggable({
                revert: true
            });
        }
    };
});


app.directive('droppable', function ($compile) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.droppable({
                drop: function (event, ui) {
                    var draggedElement = angular.element(ui.draggable);
                    var dragIndex = draggedElement.data('index');
                    var dropIndex = angular.element(this).data('index');

                    scope.items.splice(dragIndex, 1);
                    scope.dropped_items.push(draggedElement.data('obj'));

                    console.log(dragIndex);
                    console.log(dropIndex);

                    console.log(scope);
                    scope.$apply();
                }
            });
        }
    };
});

使用draggable + droppable指令将项目从子控制器移动到父控制器

1 个答案: