angularjs - jquery sortable inside angular directive misses first click -
i'm using jquery ui sortable element inside angularjs directive (initialized .sortable() in linking function). problem sortable work after first click on element...
i have tried use .trigger('click') on element doesn't work too. if initialize sortable outside of angular (in document.ready()) works fine.
any ideas debug problem ?
you need make sure dom ready inside angular directive. think 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 not work dynamically loaded lists. problem need make sure list rendered before initializing sortable. suggestion directive check if last element in list 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(); }); } } }; });
Comments
Post a Comment