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
– charlietfl, Commented Jun 5, 2015 at 11:38
Should work fine if placed in proper directive , show what you tried that didn't work — charlietfl
– charlietfl, Commented Jun 5, 2015 at 11:44
I have updated the plunker, it works but with the whole element, not the sortable classes only — Whistler
– Whistler, Commented Jun 5, 2015 at 11:56

Community · Accepted Answer · 2017-05-23 12:30:01Z

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, 2017 at 12:30

CommunityBot

11 silver badge

answered Jun 5, 2015 at 13:22

Sergiu Paraschiv

10.2k5 gold badges42 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

charlietfl Over a year ago

that's a rather fragile approach using a guess on rendering time

Sergiu Paraschiv Over a year ago

Well, of course it is and yes your solution is better :)

charlietfl · Accepted Answer · 2015-06-05 13:34:19Z

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 5, 2015 at 13:34

charlietfl

172k14 gold badges125 silver badges154 bronze badges

1 Comment

Shashishekhar Hasabnis Over a year ago

Helpful Solution. Can you please have a look at stackoverflow.com/questions/50109588/…

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related