Question

我试图在每个标签上都有可排序的面板。如果我在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"
    };
  });

})();

Answer 1

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

link

同样setTimeout(function() { $('.sortable', element).sortable(); }, 100);，以便<div ng-repeat=" t in myListOfTabs" ng-show="isSet(t.Id)" class="row sortable">课程不在另一个.sortable内。

Here is the working plunker.

Answer 2

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

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

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

的 DEMO

为什么jquery UI可排序不适用于AngularJS templateURL？

2 个答案: