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

Question

我在 AngularJS 指令中使用 jQuery UI 可排序元素（在链接函数中使用 .sortable() 初始化）。问题是 sortable 仅在第一次单击元素后才起作用...

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

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

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