Why jquery UI sortable don't work on AngularJS templateURL?

Question

I'm trying to have sortable panels on each of my tab. If I put panels on index.html it works, but when used inside directive templateUrl: tabs.html it doesn't. Please see the Plunker example here

My html file:

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

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

My tabs.html file:

<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>

My app.js file:

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

})();

Run your sortable code inside a directive. The elements don't exist at *`document.ready`* time — charlietfl, Jun 05 '15 at 11:38
Should work fine if placed in proper directive , show what you tried that didn't work — charlietfl, Jun 05 '15 at 11:44
I have updated the plunker, it works but with the whole element, not the sortable classes only — Whistler, Jun 05 '15 at 11:56

score 1 · Answer 1 · edited May 23 '17 at 12:30

1

First of all you'll need to select the .sortable elements and apply the sortable plugin to them. Next issue is that the items inside that ng-repeat won't exist in the DOM at the time link runs for the parent directive. You can find a clear explanation of this here. For now the only solution is a timeout.

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

Also <div ng-repeat=" t in myListOfTabs" ng-show="isSet(t.Id)" class="row sortable"> so that the .sortable class is not inside another <div>.

Here is the working plunker.

edited May 23 '17 at 12:30

Community

1
1

answered Jun 05 '15 at 13:22

Sergiu Paraschiv

9,929
5
36
47

that's a rather fragile approach using a guess on rendering time – charlietfl Jun 05 '15 at 13:36
Well, of course it is and yes your solution is better :) – Sergiu Paraschiv Jun 05 '15 at 13:48

score 0 · Accepted Answer · answered Jun 05 '15 at 13:34

0

All you need to do is create a sortable directive

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

This assures that once the element exists, the plugin will be bound to it

DEMO

answered Jun 05 '15 at 13:34

charlietfl

170,828
13
121
150

Helpful Solution. Can you please have a look at https://stackoverflow.com/questions/50109588/how-can-i-pass-an-angularjs-object-through-jquery-sortable?noredirect=1#comment87236942_50109588 – Shashishekhar Hasabnis May 01 '18 at 04:18

Why jquery UI sortable don't work on AngularJS templateURL?

2 Answers2