如何在不使用隔离范围表达式绑定的情况下向AngularJS指令添加回调

Question

定义在anuglarjs可排序指令上添加回调函数的范围会破坏排序功能

我在jquery-ui的顶部找到了一个简单的指令，用于直观地对列表进行排序。我想添加一个函数回调，以便在对列表进行排序时可以通知我的控制器，以便我可以调用服务器进行排序（如果服务器上需要这种排序，并且这种排序需要持久）。

我在指令上添加了一个范围对象，并定义了一个回调，但是添加该范围对象的行为使排序变得混乱。实际上，它不再在视觉上进行排序。最终，我希望了解某种情况。有什么想法吗？

此psi可排序对象将放在ul标签上，并且它期望ng-model是有问题的列表。我只是想添加一个回调，以便可以通知发生的事情。

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 scope/rootScope API Reference - $eval