Ionic: Reorder-able list in a popup

Question

Hey I'm trying to get a reorderable list in a popup window. The demo code for reordering works just fine in my main content area, but not in the popup window.

It builds the list items, and buttons proper, but when you touch the reorder button it throws this error

Uncaught TypeError: Cannot read property 'getValues' of null
ReorderDrag._moveElement @ ionic.bundle.js:7557
ReorderDrag.start @ ionic.bundle.js:7586
ionic.views.ListView.ionic.views.View.inherit._startDrag @ ionic.bundle.js:7872
ionic.views.ListView.ionic.views.View.inherit._handleDrag @ ionic.bundle.js:7932
(anonymous function) @ ionic.bundle.js:7738
triggerEvent @ ionic.bundle.js:811
dragGesture @ ionic.bundle.js:1860
detect @ ionic.bundle.js:1389
bindDomOnTouch @ ionic.bundle.js:938

When putting this code (copy pasted from docs page) in an ion-content tag for a tab, It works correctly.

<![CDATA[ // Actual code on following lines

<ion-list show-reorder="true">
  <ion-item ng-repeat="item in items">
    Item 
    <ion-reorder-button class="ion-navicon"
                        on-reorder="moveItem(item, $fromIndex, $toIndex)">
    </ion-reorder-button>
  </ion-item>
</ion-list>

]]>

However when the same code is placed the template used here

$scope.popupReorder = function() {
     var popup = $scope.activePopup = $ionicPopup.alert({
       title: 'Reorder Layers ',
       templateUrl: 'templates/tab-mix-reorder.html',
       okType: 'button',
       okText: 'close',
       scope: $scope
     });
   };

the list is rendered correctly, but throws the error.

Answer 1

For any future googlers: The error occurs because the reorder functionality relies on the <ion-list> element being wrapped in an <ion-scroll> element. Simply wrap the list in the popup in an <ion-scroll> element and everything works beautifully!