AngularJS ng-重复重新渲染

我正在使用 AngularJS 构建一个简单的应用程序。应用程序向服务器发出异步 AJAX 调用，服务器返回一个如下所示的数组：

{
    paragraphs: [
        {content: "content one"},
        {content: "cnt two"},
        {content: "random three"},
        {content: "last one yeeaah"}
    ]
}

因此，我通过 set 方法将此内容设置到 StorageService 工厂。这里一切都很好。

我在用着ng-repeat呈现结果并JQuery UI sortable能够更改元素的顺序。当交换一个项目时，我的脚本正在调用 StorageService.swap 方法，并且 StorageService 中的元素顺序会更新，但是 ng-repeat 不会重新渲染更改，但是如果我删除/添加或更改内容，它就会起作用。我如何强制角度重新渲染 ng-repeat？

= JSFIDDLE =

http://jsfiddle.net/6Jzx4/3/ http://jsfiddle.net/6Jzx4/3/

= 示例 =

当发生交换时，ng-repeat 应该重新渲染，因此 ID 是连续的

= Code =

HTML

<div ng-controller="Test" sortable>
    <div ng-repeat="item in data().paragraphs" class="box slide_content" id="{{$index}}"> 
        {{item.content}}, ID: {{$index}}
    </div>

    <input type="button" ng-click="add()" value="Add">
</div>

JS

var App = angular.module("MyApp", []);

App.controller("Test", function($scope, StorageService) {
    StorageService.set({
        paragraphs: [
            {content: "content one"},
            {content: "cnt two"},
            {content: "random three"},
            {content: "last one yeeaah"}
        ]
    });

    $scope.data = StorageService.get;

    $scope.add = StorageService.add;
});

App.directive("sortable", function(StorageService) {
    return {
        link: function(scope, element, attrs) {
            $(element[0]).sortable({
                cancel: ".disabled",
                items: "> .slide_content:not(.disabled)",
                start: function(e, t) {
                    t.item.data("start_pos", t.item.index());
                },
                stop: function(e, t) {
                    var r = t.item.data("start_pos");
                    if (r != t.item.index()) {
                                    StorageService.sort($(this).sortable("toArray"));
                    }
                }
            });
        }
    };
});

App.factory('StorageService', function() {
    var output = {};

    return {
        set: function(data) {
            angular.copy(data, output);
            return output;
        },
        get: function() {
            return output;
        },
        add: function() {
            output.paragraphs.push({
                content: 'Content'
            });
        },
        sort: function(order) {
            var localOutput = [];

            for (var j in order) {
                var id = parseInt(order[j]);
                localOutput.push(output.paragraphs[id]);
            }

            console.log('new order', localOutput);

            output.paragraphs = localOutput;
            return output;
        }
    };
});

Angular 不知道你已经改变了数组。在 a 内执行排序scope.$apply()将解决这个问题。

请注意，我添加了一个that变量自this改变里面的含义apply.

var that = this;
scope.$apply(function() {   
   StorageService.sort($(that).sortable("toArray"));
}

但该修复揭示了其他问题，这些问题似乎是由 jQuery 可排序和 Angular 之间的交互引起的（这里是fiddle http://jsfiddle.net/6Jzx4/4/这表明尝试解决问题但仍然存在问题）。这些问题已在Angular UI 可排序 https://github.com/angular-ui/ui-sortable。因此，一个好的前进道路可能是转向这一点。