I'm using a jQuery UI Sortable element inside an AngularJS directive (initialized with .sortable() in the linking function). The problem is that the sortable does work only after the first click on the element...
I have tried to use .trigger('click') on the element but it doesn't work too. If I initialize the sortable outside of angular (in document.ready()) it works fine.
Any ideas to debug this problem ?
You need to make sure the DOM is ready inside your Angular directive. I think something like this would work:
<ul>
<li ng-repeat="item in items" my-sortable="true">{{item.title}}</li>
</ul>
angular.module('myApp',[]).directive('mySortable', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.ready(function() {
// Initialize UI Sortable
});
}
};
});
This will not work for dynamically loaded lists. The problem is you need to make sure the list is fully rendered before initializing the sortable. So my suggestion is for the directive to check if the last element in the list is ready (scope.$last):
angular.module('myApp',[]).directive('mySortable', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
if (scope.$last=== true) {
element.ready(function () {
// Initialize UI Sortable
element.parent().sortable();
});
}
}
};
});
setTimeout(of 0ms) worked for me too, although apparently this works in jQuery 1.x: github.com/angular-ui/ui-sortable/issues/2