AngularJS and ui-sortable(branch 1.2): ng-mouseover breaks after sorting

Question

I upgraded my App to AngularJS 1.2 and so also switched to ui-sortable v 1.2.

The sorting is implemented for Accordion-Groups (from ui-bootstrap). With the master-tree version of sortable i could listen to ng-mouseover/ng-mouseleave inside the accordion headers but with the 1.2 version, the mouseevents are only listening as long as i haven't done any sorting. After performing any change to the sortorder, the mouseevents become deaf...

Here's a Plunker: http://plnkr.co/edit/n8yms9pb7uJp77zZ9LFK?p=preview

Can anybody give me some advice how to fix that? Thank you

Probably shouldn't use raw.github.com links in your plunk: Refused to execute script from 'https://raw.github.com/angular-ui/ui-sortable/angular1.2/src/sortable.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled. — Ben Lesh
– Ben Lesh, Commented Dec 11, 2013 at 14:39
what would be the correct way? Sortable can't be found via "Find external Libraries".. — Markus Kösel
– Markus Kösel, Commented Dec 11, 2013 at 14:46

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

Identity Problem.

elementInsertedByDropping !== elementSelectedAndDragged

In the console, one can verify the assertion above. So that narrows down the category of problem to a relatively familiar one.

I'm learning Angular myself, and I'm also having trouble with ui-sortable; please don't regard my opinions as definitive. However, I believe that the problem is that the $watch listeners need to be re-bound to the new element, as it is being created asynchronously outside of Angular.

The "ng.$rootScope.Scope" documentation describes this situation somewhat clearly in the $apply section. If I am correct, you would need to either $scope.$apply(...) code in your controller, or [preferably] write a custom directive that handles the insertion.

Fortunately, it seems that jQuery-ui-sortable's "update" event can be easily used in a custom directive to ensure that the element is bound. I found that bloggers respectTheCode and Michal Ostruszka discuss the problem of writing jQuery-ui-sortable directives in fairly clear terms; so does a fellow named Greg Gigon and several others, but I'm only allowed to offer you two links at this point.

If I can provide more precise information at a later point, I will revise this answer; I'm still learning this stuff myself, and I would like to know how to do something quite similar.

[edit: I'm not familiar enough with Angular-UI-Sortable to know whether this is a bug or simply missing functionality.]

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Dec 11, 2013 at 17:11

muddletoes

111 bronze badge

Sign up to request clarification or add additional context in comments.

1 Comment

Markus Kösel Over a year ago

Thank you for your hints. I will consider having a closer look at Michal Ostruszkas Directive if i can't fix the issue with the "official" one. But as @blesh mentiones, submitting an issue on github may be the way for now...

Ben Lesh · Accepted Answer · 2013-12-11 17:10:11Z

0

Looks like a bug in ui-sortable.

My guess: It seems to be losing the bindings from the event directives, probably because it's destroying the old DOM elements and creating a new ones without re-attaching the scope with $compile. I'd save this plunk and submit and issue on their GitHub repository

answered Dec 11, 2013 at 17:10

Ben Lesh

109k47 gold badges251 silver badges233 bronze badges

Collectives™ on Stack Overflow

AngularJS and ui-sortable(branch 1.2): ng-mouseover breaks after sorting

2 Answers 2

Identity Problem.

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Identity Problem.

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related