Question

我在AngularJS指令中使用了一个jQuery UI Sortable元素（在链接函数中使用.sortable（）初始化）。问题是sortable只在第一次单击元素后才起作用...

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

调试此问题的任何想法？

Answer 1

您需要确保Angular指令中的DOM已准备就绪。我觉得这样的事情会奏效：

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

这对动态加载的列表不起作用。问题是您需要确保在初始化sortable之前完全呈现列表。所以我的建议是指令检查列表中的最后一个元素是否准备就绪（范围。$ 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();
           });
         }
      }
   };
});

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

1 个答案: