Merge pull request #128 from thgreasi/master

Sorting no longer triggers $destroy for inner directives.

Author: thgreasi

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-ui-sortable",
-  "version": "0.12.0",
+  "version": "0.12.1",
   "description": "This directive allows you to jQueryUI Sortable.",
   "author": "https://github.com/angular-ui/ui-sortable/graphs/contributors",
   "license": "MIT",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-ui-sortable",
-  "version": "0.12.0",
+  "version": "0.12.1",
   "description": "This directive allows you to jQueryUI Sortable.",
   "author": "https://github.com/angular-ui/ui-sortable/graphs/contributors",
   "license": "MIT",

src/sortable.js

@@ -115,11 +115,9 @@ angular.module('ui.sortable', [])
               // 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();
               if (element.sortable('option','helper') === 'clone') {
-                // first detach all the savedNodes and then restore all of them
-                // except .ui-sortable-helper element (which is placed last).
-                // That way it will be garbage collected.
+                // restore all the savedNodes except .ui-sortable-helper element
+                // (which is placed last). That way it will be garbage collected.
                 savedNodes = savedNodes.not(savedNodes.last());
               }
               savedNodes.appendTo(element);
@@ -153,7 +151,7 @@ angular.module('ui.sortable', [])
                 // if the item was not moved, then restore the elements
                 // so that the ngRepeat's comment are correct.
                 if((!('dropindex' in ui.item.sortable) || ui.item.sortable.isCanceled()) && element.sortable('option','helper') !== 'clone') {
-                  savedNodes.detach().appendTo(element);
+                  savedNodes.appendTo(element);
                 }
               }
             };

test/karma.conf.js

@@ -22,6 +22,7 @@ module.exports = function(config) {
       'bower_components/angular-mocks/angular-mocks.js',
       'src/sortable.js',
       'test/sortable.test-helper.js',
+      'test/sortable.test-directives.js',
       'test/*.spec.js'
     ],
 

test/sortable.e2e.directives.spec.js

@@ -0,0 +1,100 @@
+'use strict';
+
+describe('uiSortable', function() {
+
+  // Ensure the sortable angular module is loaded
+  beforeEach(module('ui.sortable'));
+  beforeEach(module('ui.sortable.testHelper'));
+  beforeEach(module('ui.sortable.testDirectives'));
+
+  var EXTRA_DY_PERCENTAGE, listContent, listInnerContent;
+
+  beforeEach(inject(function (sortableTestHelper) {
+    EXTRA_DY_PERCENTAGE = sortableTestHelper.EXTRA_DY_PERCENTAGE;
+    listContent = sortableTestHelper.listContent;
+    listInnerContent = sortableTestHelper.listInnerContent;
+  }));
+
+  describe('Inner directives related', function() {
+
+    var host;
+
+    beforeEach(inject(function() {
+      host = $('<div id="test-host"></div>');
+      $('body').append(host);
+    }));
+
+    afterEach(function() {
+      host.remove();
+      host = null;
+    });
+
+    it('should work when inner directives are used', function() {
+      inject(function($compile, $rootScope) {
+        var element;
+        element = $compile(''.concat(
+          '<ul ui-sortable="opts" ng-model="items">',
+            '<li ng-repeat="item in items" id="s-{{$index}}" class="sortable-item">',
+              '<ui-sortable-simple-test-directive ng-model="item"></ui-sortable-simple-test-directive>',
+            '</li>',
+          '</ul>'))($rootScope);
+
+        $rootScope.$apply(function() {
+          $rootScope.opts = { };
+          $rootScope.items = ['One', 'Two', 'Three'];
+        });
+
+        host.append(element);
+
+        var li = element.find('> :eq(1)');
+        var dy = (1 + EXTRA_DY_PERCENTAGE) * li.outerHeight();
+        li.simulate('drag', { dy: dy });
+        expect($rootScope.items).toEqual(['One', 'Three', 'Two']);
+        expect($rootScope.items).toEqual(listInnerContent(element));
+
+        li = element.find('> :eq(1)');
+        dy = -(1 + EXTRA_DY_PERCENTAGE) * li.outerHeight();
+        li.simulate('drag', { dy: dy });
+        expect($rootScope.items).toEqual(['Three', 'One', 'Two']);
+        expect($rootScope.items).toEqual(listInnerContent(element));
+
+        $(element).remove();
+      });
+    });
+
+    it('should not $destroy directives after sorting.', function() {
+      inject(function($compile, $rootScope) {
+        var element;
+        element = $compile(''.concat(
+          '<ul ui-sortable="opts" ng-model="items">',
+            '<li ng-repeat="item in items" id="s-{{$index}}" class="sortable-item">',
+              '<ui-sortable-destroyable-test-directive ng-model="item"></ui-sortable-destroyable-test-directive>',
+            '</li>',
+          '</ul>'))($rootScope);
+
+        $rootScope.$apply(function() {
+          $rootScope.opts = { };
+          $rootScope.items = ['One', 'Two', 'Three'];
+        });
+
+        host.append(element);
+
+        var li = element.find('> :eq(1)');
+        var dy = (1 + EXTRA_DY_PERCENTAGE) * li.outerHeight();
+        li.simulate('drag', { dy: dy });
+        expect($rootScope.items).toEqual(['One', 'Three', 'Two']);
+        expect($rootScope.items).toEqual(listInnerContent(element));
+
+        li = element.find('> :eq(1)');
+        dy = -(1 + EXTRA_DY_PERCENTAGE) * li.outerHeight();
+        li.simulate('drag', { dy: dy });
+        expect($rootScope.items).toEqual(['Three', 'One', 'Two']);
+        expect($rootScope.items).toEqual(listInnerContent(element));
+
+        $(element).remove();
+      });
+    });
+
+  });
+
+});

test/sortable.test-directives.js

@@ -0,0 +1,38 @@
+'use strict';
+
+angular.module('ui.sortable.testDirectives', [])
+  .directive('uiSortableSimpleTestDirective',
+    function() {
+      return {
+        restrict: 'AE',
+        scope: true,
+        require: '?ngModel',
+        template: '<div>Directive: <span class="itemContent" ng-bind="text"></span> !!!</div>',
+        link: function(scope, element, attrs, ngModel) {
+          scope.$watch(attrs.ngModel, function(value) {
+              scope.text = value;
+            });
+        }
+      };
+    }
+  )
+  .directive('uiSortableDestroyableTestDirective',
+    function() {
+      return {
+        restrict: 'AE',
+        scope: true,
+        require: '?ngModel',
+        template: '<div>$destroy(able) Directive: <span class="itemContent" ng-bind="text"></span> !!!</div>',
+        link: function(scope, element, attrs, ngModel) {
+          scope.$watch(attrs.ngModel, function(value) {
+              scope.text = value;
+            });
+
+          element.bind('$destroy', function() {
+            element.html('');
+          });
+        }
+      };
+    }
+  );
+