ajax后再ng-repeat,javascript – AngularJS ng-repeat重新渲染

我正在使用AngularJS构建一个简单的应用程序.该应用程序对服务器进行异步AJAX调用,服务器返回如下数组：

{

paragraphs: [

{content: "content one"},

{content: "cnt two"},

{content: "random three"},

{content: "last one yeeaah"}

]

}

所以我通过set方法将此内容设置到StorageService工厂.这里一切都很好.

我正在使用ng-repeat来渲染结果,而JQuery UI可以排序以便能够更改元素的顺序.交换项目时,我的脚本正在调用StorageService.swap方法,并且StorageService中的元素顺序已更新,但是ng-repeat并未重新呈现更改,但是如果我删除/添加或更改其正在运行的内容.我如何强制角度重新渲染ng-repeat？

= JSFIDDLE =

=示例=

当发生交换时,应重新呈现ng-repeat,因此ID是连续的

=代码=

HTML

{{item.content}}, ID: {{$index}}

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不知道你已经改变了数组.在范围内执行排序.$apply()将解决这个问题.

请注意,我添加了一个变量,因为这会改变apply中的含义.

var that = this;

scope.$apply(function() {

StorageService.sort($(that).sortable("toArray"));

}

但是这个解决方案揭示了其他问题,这些问题似乎是由jQuery sortable和Angular之间的交互引起的(这里的fiddle表示试图解决问题,但仍有问题).这些问题已于Angular UI Sortable解决.因此,向前迈进的良好道路可能就是转向这一问题.