Ng-repeat nicht aktualisieren mit Array-Änderungen

Question

Ich habe über dieses Problem seit vielen Stunden und lesen Sie viele andere Fragen, die völlig gleich aussehen und ich habe versucht, jede ihrer Lösungen, aber keiner scheint zu funktionieren.

Ich habe ein Array von Objekten (instructionObj.instructions) und diese Objekte werden mit ng-repeat wiederholt und ihre Vorlage ist eine Anweisung.

<div instruction-directive ng-repeat="i in instructionsObj.instructions"> </div> 

Ich erlaube dann die Elemente mit Jquery UI sortierbar sortiert werden.

var first, second; 
$(".sort").sortable({ 
    axis: "y", 
    start: function(event, ui) { 
     first = ui.item.index(); 
    }, 
    stop: function(event, ui) { 
     second = ui.item.index(); 
     console.log(first + " " + second); 
     rearrange(first, second); 
     $scope.$apply(); 
    } 
}); 

ich zugreifen dann die Start- und End-Index des Objekts bewegt und neu ordnen das Array entsprechend:

function rearrange(f, s){ 
    $timeout(function() { 
     $scope.instructionsObj.instructions.splice(s, 0, 
      $scope.instructionsObj.instructions.splice(f, 1)[0]); 
     $scope.$apply(); 
    }); 
} 

All dies funktioniert gut die meiste Zeit. Das einzige Szenario, bei dem ich einen Fehler gefunden habe, ist das Umordnen der Objekte als solches (eine Spalte ist die aktuelle Position aller auf dem Bildschirm angezeigten Objekte):

a | b | c | d | a

b | c | d | c | b

c | d | b | b | d

d | a | a | a | c

Der letzte Schritt sollte a, d, c, b sein. Aber es ändert sich zu a, b, d, c.

jedoch, wenn ich zu meiner vorherigen Ansicht zurück gehen und kommen, um die richtige Konfiguration wieder angezeigt wird, ist alles gut. Wie Sie sehen können, habe ich versucht $timeout und $apply() und viele andere Dinge, aber keine scheinen zu funktionieren.

Ich weiß, das ist ein DOM-Update-Problem, weil ich das Array protokollieren kann und sehen, dass es anders ist (korrekt) von dem, was das DOM zeigt (falsch). Jede Hilfe wäre willkommen.

Update:

ich auch <pre ng-bind="instructionsObj.instructions|json</pre> bin mit dem genauen Layout des Arrays zu zeigen, und es ist immer richtig. Ich bin sprachlos.

Answer 1

Zum Glück habe ich eine Lösung gefunden, obwohl ich nicht verstehe, warum das Problem trotzdem passiert ist.

In diesem JS:

sortableEle = $('.sort').sortable({ 
    start: $scope.dragStart, 
    update: $scope.dragEnd 
}); 

$scope.dragStart = function(e, ui) { 
    ui.item.data('start', ui.item.index()); 
} 
$scope.dragEnd = function(e, ui) { 
    var start = ui.item.data('start'), 
     end = ui.item.index(); 

    $scope.instructionsObj.instructions.splice(end, 0, 
     $scope.instructionsObj.instructions.splice(start, 1)[0]); 
    currentRecipe.setInstructions($scope.instructionsObj.instructions); 
    $scope.$apply(); 
    sortableEle.refresh(); 
} 

I $scope.$apply()auch als sortableEle.refresh() nach der Anordnung zu verändern nennen benötigt.

Wieder verstehe ich nicht, warum es 10% der Zeit versauen würde, aber das hat es behoben.

FYI: Ich habe die sortierbare Funktion ein wenig verändert, aber es macht genau das gleiche wie vorher.