From 620b9d8f62dd76bbf3db5c630c97a6ceecb311c2 Mon Sep 17 00:00:00 2001 From: yenoh2 Date: Fri, 18 Nov 2016 14:52:04 +0100 Subject: [PATCH 1/5] Add files via upload I'm modifying the code to handle situations where the ng-repeat isn't directly nested in the ui-sortable directive. --- src/sortable.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/sortable.js b/src/sortable.js index 7c799d1..efae5ed 100644 --- a/src/sortable.js +++ b/src/sortable.js @@ -195,6 +195,15 @@ angular.module('ui.sortable', []) break; } } + if (!result) { + for (var i = 0; i < elementScopes.length; i++) { + var x = elementScopes[i]; + if (x.element[0] === element[0].closest("[ui-sortable]")) { + result = x.scope; + break; + } + } + } return result; } From e24de3b91a4a67fb576fa76d740ea2124f109352 Mon Sep 17 00:00:00 2001 From: yenoh2 Date: Mon, 28 Nov 2016 14:25:42 +0100 Subject: [PATCH 2/5] Added comments to code --- src/sortable.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/sortable.js b/src/sortable.js index efae5ed..aee38d8 100644 --- a/src/sortable.js +++ b/src/sortable.js @@ -97,7 +97,7 @@ angular.module('ui.sortable', []) } return; } - + if (!defaultOptions) { defaultOptions = angular.element.ui.sortable().options; } @@ -195,6 +195,11 @@ angular.module('ui.sortable', []) break; } } + //If result is still null it means that the draggable (ng-repeat) item isn't a direct child of + //the element containing the ui.sortable directive. This may be required when using the ui.sortable + //directive with other directives that have isolated scopes. This will compare x.element[0] + //with the closest ancestorof element[0] that has the ui-sortable attribute to get the applicable + //element scope. if (!result) { for (var i = 0; i < elementScopes.length; i++) { var x = elementScopes[i]; @@ -381,7 +386,6 @@ angular.module('ui.sortable', []) if(!ui.item.sortable.received && ('dropindex' in ui.item.sortable) && !ui.item.sortable.isCanceled()) { - scope.$apply(function () { ngModel.$modelValue.splice( ui.item.sortable.dropindex, 0, @@ -467,7 +471,7 @@ angular.module('ui.sortable', []) var sortableWidgetInstance = getSortableWidgetInstance(element); if (!!sortableWidgetInstance) { var optsDiff = patchUISortableOptions(newVal, oldVal, sortableWidgetInstance); - + if (optsDiff) { element.sortable('option', optsDiff); } @@ -483,7 +487,7 @@ angular.module('ui.sortable', []) } else { $log.info('ui.sortable: ngModel not provided!', element); } - + // Create sortable element.sortable(opts); } From d8798d25cf5c202a84e8cc14097ff5d92f211e67 Mon Sep 17 00:00:00 2001 From: yenoh2 Date: Mon, 28 Nov 2016 14:52:25 +0100 Subject: [PATCH 3/5] Added description of the changes in this fork Also added a CodePen example illustrating the functioning change. --- README.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/README.md b/README.md index cf060eb..e481dc3 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,9 @@ +# Notes for this for +This fork modifies the sortable.js file at line 198, in order for the ui-sortable directive to work on other directives that have isolated scopes. One example is the angular material tabs directive (https://material.angularjs.org/latest/demo/tabs). To workaround the limitation of being unable to have two directives with isolated scopes on one element (not alowed by AngularJS), wrap the md-tabs element with an element containing the ui-sortable directive. You must also set the sortable option, in the case of md-tabs, '"items": "md-tab-item"'. I also noticed the example below didn't work until I added a "track by" on the ng-repeat. + +See the live example on CodePen: +http://codepen.io/yenoh2/pen/rWxxVJ + # UI.Sortable directive [![npm](https://img.shields.io/npm/v/angular-ui-sortable.svg)](https://www.npmjs.com/package/angular-ui-sortable) [![npm](https://img.shields.io/npm/dm/angular-ui-sortable.svg)](https://www.npmjs.com/package/angular-ui-sortable) From 2cd8ae952b5ebf73523670df7f2573f3cb341f00 Mon Sep 17 00:00:00 2001 From: yenoh2 Date: Tue, 29 Nov 2016 12:49:05 +0100 Subject: [PATCH 4/5] Correcting linter errors --- src/sortable.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/sortable.js b/src/sortable.js index aee38d8..3671a15 100644 --- a/src/sortable.js +++ b/src/sortable.js @@ -196,14 +196,14 @@ angular.module('ui.sortable', []) } } //If result is still null it means that the draggable (ng-repeat) item isn't a direct child of - //the element containing the ui.sortable directive. This may be required when using the ui.sortable + //the element containing the ui.sortable directive. This may be required when using the ui.sortable //directive with other directives that have isolated scopes. This will compare x.element[0] //with the closest ancestorof element[0] that has the ui-sortable attribute to get the applicable //element scope. if (!result) { - for (var i = 0; i < elementScopes.length; i++) { - var x = elementScopes[i]; - if (x.element[0] === element[0].closest("[ui-sortable]")) { + for (i = 0; i < elementScopes.length; i++) { + x = elementScopes[i]; + if (x.element[0] === element[0].closest('[ui-sortable]')) { result = x.scope; break; } From 2f0a4b887c6194b60c8cfafc064f8e324d3d51c5 Mon Sep 17 00:00:00 2001 From: yenoh2 Date: Tue, 29 Nov 2016 12:49:55 +0100 Subject: [PATCH 5/5] Revert to original --- README.md | 6 ------ 1 file changed, 6 deletions(-) diff --git a/README.md b/README.md index e481dc3..cf060eb 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,3 @@ -# Notes for this for -This fork modifies the sortable.js file at line 198, in order for the ui-sortable directive to work on other directives that have isolated scopes. One example is the angular material tabs directive (https://material.angularjs.org/latest/demo/tabs). To workaround the limitation of being unable to have two directives with isolated scopes on one element (not alowed by AngularJS), wrap the md-tabs element with an element containing the ui-sortable directive. You must also set the sortable option, in the case of md-tabs, '"items": "md-tab-item"'. I also noticed the example below didn't work until I added a "track by" on the ng-repeat. - -See the live example on CodePen: -http://codepen.io/yenoh2/pen/rWxxVJ - # UI.Sortable directive [![npm](https://img.shields.io/npm/v/angular-ui-sortable.svg)](https://www.npmjs.com/package/angular-ui-sortable) [![npm](https://img.shields.io/npm/dm/angular-ui-sortable.svg)](https://www.npmjs.com/package/angular-ui-sortable)