jquery-ui - jquery sortable inside angular指令错过了第一次点击

Question

我在 AngularJS 指令中使用 jQuery UI Sortable 元素(在链接函数中使用 .sortable() 初始化)。问题是 sortable 只有在第一次点击元素后才起作用......

我尝试在元素上使用 .trigger('click') 但它也不起作用。如果我在 Angular 之外(在 document.ready() 中)初始化 sortable，它工作正常。

调试这个问题有什么想法吗？

Answer 1

您需要确保 DOM 在 Angular 指令中准备就绪。我认为这样的事情会起作用:

<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
        });
      }
   };
});

这不适用于动态加载的列表。问题是您需要确保列表在初始化可排序之前已完全呈现。所以我的建议是指令检查列表中的最后一个元素是否准备好 (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();
           });
         }
      }
   };
});