如何在不使用孤立示波器表达结合的情况下向AngularJS指令添加回调

Question

定义范围以在Anuglarjs可排序指令中添加回调函数，分类功能

我找到了一个简单的指令，该指令位于JQuery-UI之上，用于视觉上对列表进行排序。我想添加一个函数回调，以便在列表进行排序时可以通知我的控制器，以便我可以打电话给服务器以在服务器上以及此类的情况下进行排序。

我在指令上添加了一个范围对象并定义了一个回调，但是添加此范围对象的行为会弄乱分类。它实际上不再以视觉上排序。最终，我想知道发生了一种。有什么想法吗？

此PSI可分配的标签将在UL标签上进行，并希望NG模型成为有关的列表。我只是想添加一个回调，以便可以告诉我发生的类型。

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();
                    //scope.onSorted();
                }
                element.sortable(opts);
            }
        };
    }]);

Answer 1

要避免添加孤立范围，只需使用 scope.$eval：

app.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;
            }
            //
            //...
            //
            // jQuery sortable update callback
            function update(event, ui) {
                //...
                ̶s̶c̶o̶p̶e̶.̶o̶n̶S̶o̶r̶t̶e̶d̶(̶)̶;̶
                scope.$eval(attrs.onSorted, {$event: event});
                scope.$apply();
            }
            element.sortable(opts);
        }
    };
}]);

有关更多信息，请参见

• AngularJS范围/Rootscope API参考 - $ eval