AngularJS可排序指令错误

时间:2019-05-28 13:49:38

标签: javascript angularjs

我正在使用以下指令来对列表进行排序。每3次就不起作用,我也不知道为什么。我的清单中有2个项目。我将顶部的项目拖到底部,并且效果很好。然后,我再次将顶部项目移至底部,然后再次工作。然后,我做同样的事情,将顶部移到底部,但它没有排序(回到原来的样子)。然后,我可以继续执行此操作,并且每第3次不起作用。有什么想法吗?

angular.module('psi.sortable', [])
    .value('psiSortableConfig', {
        placeholder: "placeholder",
        opacity: 0.8,
        axis: "y",
        helper: 'clone',
        forcePlaceholderSize: true
    })
    .directive("psiSortable", ['psiSortableConfig', '$log', function (psiSortableConfig, $log) {
        return {
            require: '?ngModel',
            /*scope: {
                onSorted: '&'
            },*/
            link: function (scope, element, attrs, ngModel) {

                if (!ngModel) {
                    $log.error('psiSortable needs a ng-model attribute!', element);
                    return;
                }

                var opts = {};
                angular.extend(opts, psiSortableConfig);
                opts.update = update;

                // listen for changes on psiSortable attribute
                scope.$watch(attrs.psiSortable, function (newVal) {
                    angular.forEach(newVal, function (value, key) {
                        element.sortable('option', key, value);
                    });
                }, true);

                // store the sortable index
                scope.$watch(attrs.ngModel + '.length', function () {
                    element.children().each(function (i, elem) {
                        jQuery(elem).attr('sortable-index', i);
                    });
                });

                // jQuery sortable update callback
                function update(event, ui) {
                    // get model
                    var model = ngModel.$modelValue;
                    // remember its length
                    var modelLength = model.length;
                    // rember html nodes
                    var items = [];

                    // loop through items in new order
                    element.children().each(function (index) {
                        var item = jQuery(this);

                        // get old item index
                        var oldIndex = parseInt(item.attr("sortable-index"), 10);

                        // add item to the end of model
                        model.push(model[oldIndex]);

                        if (item.attr("sortable-index")) {
                            // items in original order to restore dom
                            items[oldIndex] = item;
                            // and remove item from dom
                            item.detach();
                        }
                    });

                    model.splice(0, modelLength);

                    // restore original dom order, so angular does not get confused
                    element.append.apply(element, items);

                    // notify angular of the change
                    scope.$digest();

                    // raise the event so the user knows a sort happened
                    //scope.$eval(attrs.onSorted, { $event: event });
                    scope.$eval(attrs.onSorted);
                    scope.$apply();
                }

                element.sortable(opts);
            }
        };
    }]);

https://plnkr.co/edit/erxKGIB4tin8UlGvPjX1?p=preview

0 个答案:

没有答案