为什么 jquery UI sortable 不适用于 AngularJS templateURL？答案

【问题标题】：Why jquery UI sortable don't work on AngularJS templateURL?为什么 jquery UI sortable 不适用于 AngularJS templateURL？
【发布时间】：2015-06-05 11:36:13
【问题描述】：

我试图在我的每个标签上都有可排序的面板。如果我将面板放在 index.html 上它可以工作，但是当在指令 templateUrl: tabs.html 中使用时它不会。请参阅 Plunker 示例here

我的html文件：

<body>
  <div class="container" ng-controller="testCtrl">
    <app-tabs></app-tabs>
  </div>

  <script>
        $(document).ready(function () {
        $(function () {
            $(".sortable").sortable();
        });
    });
  </script>
</body>

我的 tabs.html 文件：

<ul class="nav nav-pills">
    <li role="presentation" ng-class="{ active:isSet(t.Id) }" ng-repeat=" t in myListOfTabs">
        <a href ng-click="setTab(t.Id)">{{t.Name}}</a>
    </li>
    <li role="presentation" ng-class="{ active:isSet(1) }">
    <a href ng-click="setTab(1)">Add Tab</a>
    </li>
</ul>

<div ng-repeat=" t in myListOfTabs" ng-show="isSet(t.Id)">
    <div class="row sortable">
      <div class="panel panel-default">
        <div class="panel-body">Panel 1</div>
      </div>
      <div class="panel panel-default">
        <div class="panel-body">Panel 2</div>
      </div>
      <div class="panel panel-default">
        <div class="panel-body">Panel 3</div>
      </div>
      <div class="panel panel-default">
        <div class="panel-body">Panel 4</div>
      </div>
      <div class="panel panel-default">
        <div class="panel-body">Panel 5</div>
      </div>
      <div class="panel panel-default">
        <div class="panel-body">Panel 6</div>
      </div>
    </div>
</div>

我的 app.js 文件：

(function() {

  var modelTabs = [{
    Id: 2,
    Name: "Tab 1",
    Layout: 1
  }, {
    Id: 3,
    Name: "Tab 2",
    Layout: 1
  }, {
    Id: 4,
    Name: "Tab 3",
    Layout: 1
  }];


  var app = angular.module('appTest', []);


  app.controller('testCtrl', ["$scope", function($scope) {

    $scope.myListOfTabs = modelTabs;
  }]);


  app.directive("appTabs", function() {
    return {
      restrict: "E",
      templateUrl: "tabs.html",
      controller: function($scope) {
        $scope.tab = 2;

        $scope.isSet = function(checkTab) {
          return $scope.tab === checkTab;
        };

        $scope.setTab = function(activeTab) {
          $scope.tab = activeTab;
        };
      },
      controllerAs: "tab"
    };
  });

})();

【问题讨论】：

在指令中运行您的可排序代码。元素在 document.ready 时间不存在
我试过了，不行
如果放在正确的指令中应该可以正常工作，显示您尝试过的无效
我已经更新了 plunker，它可以工作，但适用于整个元素，而不是仅可排序的类

标签： jquery angularjs jquery-ui

【解决方案1】：

首先，您需要选择.sortable 元素并将sortable 插件应用于它们。下一个问题是 ng-repeat 中的项目在 link 为父指令运行时将不存在于 DOM 中。你可以找到这个here的清晰解释。目前唯一的解决方案是超时。

setTimeout(function() {
    $('.sortable', element).sortable();
}, 100);

还有<div ng-repeat=" t in myListOfTabs" ng-show="isSet(t.Id)" class="row sortable"> 以便.sortable 类不在另一个<div> 中。

Here is the working plunker.

【讨论】：

这是一个相当脆弱的方法，它使用了对渲染时间的猜测
嗯，当然是这样，是的，你的解决方案更好:)

【解决方案2】：

您需要做的就是创建一个sortable 指令

app.directive("sortable", function() {
    return {
      restrict: "C",
      link: function(scope, element, attrs) {
        element.sortable();
      }
    }
});

这保证了一旦元素存在，插件就会绑定到它

DEMO

【讨论】：

有用的解决方案。你能看看stackoverflow.com/questions/50109588/…