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

Popular posts from this blog

.htaccess - First slash is removed after domain when entering a webpage in the browser -

Automatically create pages in phpfox -

c# - Farseer ContactListener is not working -