Use a different strategy for working with Angular that works with Angular 1.2 ng-repeat comments. #48

Author: Jeremy Mickelson

src/sortable.js

@@ -6,11 +6,12 @@
 angular.module('ui.sortable', [])
   .value('uiSortableConfig',{})
   .directive('uiSortable', [
-    'uiSortableConfig', '$log',
-    function(uiSortableConfig, log) {
+    'uiSortableConfig', '$timeout', '$log',
+    function(uiSortableConfig, $timeout, $log) {
       return {
         require: '?ngModel',
         link: function(scope, element, attrs, ngModel) {
+          var savedNodes;
 
           function combineCallbacks(first,second){
             if( second && (typeof second === "function") ){
@@ -32,87 +33,57 @@ angular.module('ui.sortable', [])
             update:null
           };
 
-          var apply = function(e, ui) {
-            if (ui.item.sortable.resort || ui.item.sortable.relocate) {
-              scope.$apply();
-            }
-          };
-
           angular.extend(opts, uiSortableConfig);
 
           if (ngModel) {
 
-            ngModel.$render = function() {
-              element.sortable( "refresh" );
-            };
+            // When we add or remove elements, we need the sortable to 'refresh'
+            scope.$watch(attrs.ngModel+'.length', function() {
+              // Timeout to let ng-repeat modify the DOM
+              $timeout(function() {
+                element.sortable( "refresh" );
+              });
+            });
 
             callbacks.start = function(e, ui) {
               // Save position of dragged item
               ui.item.sortable = { index: ui.item.index() };
-            };
-
-            callbacks.update = function(e, ui) {
-              // For some reason the reference to ngModel in stop() is wrong
-              ui.item.sortable.resort = ngModel;
-            };
-
-            callbacks.receive = function(e, ui) {
-              ui.item.sortable.relocate = true;
-              // added item to array into correct position and set up flag
-              ngModel.$modelValue.splice(ui.item.index(), 0, ui.item.sortable.moved);
-            };
 
-            callbacks.remove = function(e, ui) {
-              // copy data into item
-              if (ngModel.$modelValue.length === 1) {
-                ui.item.sortable.moved = ngModel.$modelValue.splice(0, 1)[0];
-              } else {
-                ui.item.sortable.moved =  ngModel.$modelValue.splice(ui.item.sortable.index, 1)[0];
-              }
+              // We need to make a copy of the current element's contents so
+              // we can restore it after sortable has messed it up
+              savedNodes = element.contents().not(
+                //Don't inlcude the placeholder
+                element.find('.ui-sortable-placeholder'));
             };
 
-            callbacks.stop = function(e, ui) {
-              // digest all prepared changes
-              if (ui.item.sortable.resort && !ui.item.sortable.relocate) {
-
-                // Fetch saved and current position of dropped element
-                var end, start;
-                start = ui.item.sortable.index;
-                end = ui.item.index();
-
-                // Reorder array and apply change to scope
-                ui.item.sortable.resort.$modelValue.splice(end, 0, ui.item.sortable.resort.$modelValue.splice(start, 1)[0]);
-
-              }
-            };
-
-            scope.$watch(attrs.uiSortable, function(newVal, oldVal){
-              angular.forEach(newVal, function(value, key){
-
-                if( callbacks[key] ){
-                  // wrap the callback
-                  value = combineCallbacks( callbacks[key], value );
-
-                  if ( key === 'stop' ){
-                    // call apply after stop
-                    value = combineCallbacks( value, apply );
-                  }
-                }
-
-                element.sortable('option', key, value);
+            callbacks.update = function(e, ui) {
+              // Fetch saved and current position of dropped element
+              var end, start;
+              start = ui.item.sortable.index;
+              end = ui.item.index();
+
+              // Cancel the sort (let ng-repeat do the sort for us)
+              element.sortable('cancel');
+
+              // Put the nodes back exactly the way they started (this is very
+              // important because ng-repeat uses comment elements to delineate
+              // the start and stop of repeat sections and sortable doesn't
+              // respect their order (even if we cancel, the order of the
+              // comments are still messed up).
+              savedNodes.detach().appendTo(element);
+
+              // Reorder array and apply change to scope
+              scope.$apply(function() {
+                ngModel.$modelValue.splice(end, 0, ngModel.$modelValue.splice(start, 1)[0]);
               });
-            }, true);
-
-            angular.forEach(callbacks, function(value, key ){
+            };
 
+            angular.forEach(callbacks, function(value, key){
               opts[key] = combineCallbacks(value, opts[key]);
             });
 
-            // call apply after stop
-            opts.stop = combineCallbacks( opts.stop, apply );
-
           } else {
-            log.info('ui.sortable: ngModel not provided!', element);
+            $log.info('ui.sortable: ngModel not provided!', element);
           }
 
           // Create sortable