ng-sortable: Not working when as-sortable-item-handle inside directive with isolated scope

I ma using the ng-sortable as follows

<section as-sortable ng-model='somedata'>
    <div ng-repeat>
       <div class='a'><div>
       <div class='b' as-sortable-item>
           <some-directive-with-isolated-scope as-sortable-item-handler>
      </div>
    </div>
</section>'

and I receive the following error on line 654 Uncaught TypeError: Cannot read property ‘options’ of undefined

//the row

 // (optional) Scrollable container as reference for top & left offset calculations, defaults to Document
            scrollableContainer = angular.element($document[0].querySelector(scope.sortableScope.options.scrollableContainer)).length > 0 ?
              $document[0].querySelector(scope.sortableScope.options.scrollableContainer) : $document[0].documentElement;

the problem is that the sortableScope is inside the scope. itemScope

About this issue

Original URL
State: closed
Created 10 years ago
Comments: 34 (8 by maintainers)

Commits related to this issue

Fix for issue #93 — committed to a5hik/ng-sortable by a5hik 9 years ago
Fixes issue #93; Using right scope for item when handle is in isolated scope — committed to johankvint/ng-sortable by johankvint 8 years ago
Merge pull request #324 from cybercomkvint/handle_isolated_fix Fixes issue #93 — committed to a5hik/ng-sortable by a5hik 8 years ago

Most upvoted comments

I just updated to latest version 1.3.8 and am still getting this error:

Uncaught TypeError: item.index is not a function

Any chance the merged fix can get incorporated in a new release?

cnickless on Jun 4, 2017

I’ll be working on that component again this quarter. So we’ll see.

On Mar 27, 2016, at 8:54 PM, ninelhodzic notifications@github.com wrote:

Is this solved?

— You are receiving this because you commented. Reply to this email directly or view it on GitHub https://github.com/a5hik/ng-sortable/issues/93#issuecomment-202179143

robertbl22twc on Mar 28, 2016

For info, I managed to fix the item.index is not a function error with this patch

--- lib/ng-sortable.js  2016-06-08 00:00:32.000000000 +0200
+++ lib/ng-sortable.js  2016-11-01 14:19:17.516869373 +0100
@@ -260,13 +260,13 @@
         dragItem: function (item) {

           return {
+            index: Number.isInteger(item.index) ? item.index : item.index(),
-            index: item.index(),
             parent: item.sortableScope,
             source: item,
             targetElement: null,
             targetElementOffset: null,
             sourceInfo: {
+              index: Number.isInteger(item.index) ? item.index : item.index(),
-              index: item.index(),
               itemScope: item.itemScope,
               sortableScope: item.sortableScope
             },
@@ -290,7 +290,8 @@
               // move the item to a new position
               this.parent = parent;
               // if the source item is in the same parent, the target index is after the source index and we're not cloning
+              var sourceIndex = Number.isInteger(this.source.index) ? this.source.index : this.source.index();
+              if (this.isSameParent() && sourceIndex < index && !this.sourceInfo.sortableScope.cloning) {
-              if (this.isSameParent() && this.source.index() < index && !this.sourceInfo.sortableScope.cloning) {
                 index = index - 1;
               }
               this.index = index;
@@ -845,7 +846,8 @@
             }
             if (!targetScope.sortableScope.options.clone) {
               targetElement[0].parentNode.insertBefore(placeHolder[0], targetElement[0]);
+              var index = Number.isInteger(targetScope.index) ? targetScope.index : targetScope.index();
+              dragItemInfo.moveTo(targetScope.sortableScope, index);
-              dragItemInfo.moveTo(targetScope.sortableScope, targetScope.index());
             }
           }

@@ -862,7 +864,8 @@
             }
             if (!targetScope.sortableScope.options.clone) {
               targetElement.after(placeHolder);
+              var index = Number.isInteger(targetScope.index) ? targetScope.index : targetScope.index();
+              dragItemInfo.moveTo(targetScope.sortableScope, index + 1);
-              dragItemInfo.moveTo(targetScope.sortableScope, targetScope.index() + 1);
             }
           }

@@ -935,7 +938,8 @@
                 if (placeholderIndex < 0) {
                   insertBefore(targetElement, targetScope);
                 } else {
+                  var index = Number.isInteger(targetScope.index) ? targetScope.index : targetScope.index();
+                  if (placeholderIndex <= index) {
-                  if (placeholderIndex <= targetScope.index()) {
                     insertAfter(targetElement, targetScope);
                   } else {
                     insertBefore(targetElement, targetScope);

Jenselme on Nov 1, 2016

I’m also having issue similar to this:

<div data-as-sortable="callbacks" data-ng-model="items">
  <custom-directive ng-repeat="item in items" />
</div>

And then I’m using data-as-sortable-itemand data-as-sortable-item-handle inside custom directive template.

The error I’m getting when dragging:

TypeError: Cannot read property 'dragStart' of undefined

hannupekka on May 15, 2015