0

我有两个指令，可拖动和可放置。指令本身将 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();
                }
            });
        }
    };
});
4

1 回答 1

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();
                }
            });
        }
    };
});
于 2013-06-19T04:45:35.740 回答