Ion-content scroll="true" breaks ng-repeat render?


#1

I’m having a strange redraw problem when I show/hide ng-repeated items using a model attribute. I get two layers of the content I expect (4 movies). The top layer correctly scrolls over the bottom (unwanted) layer. I only want the top layer. Each movie has an attached handler to hide the other movies when one item is clicked. If the (remaining) item is clicked again, then the other items should reappear; this is already working, too.

(with ion-content.scroll=“true”, no item selected, all top items appear scrolling over unwanted back items)

Screenshot caption="hi"

(with ion-content.scroll=“true”, ONE selected, ONE item scrolls over unwanted back items from initial load)

Screenshot

Here is the markup:

  <ion-content class="has-header" **scroll="true"**>
    <div ng-repeat="card in results" class="instance result-{{$index}}" title="{{card.title}}" **ng-click="toggleFocus(card.tmsId)"**  ng-model="card">
      <img ng-src="{{card.preferredImage}}" width="{{itemWidth}}" style="margin:10px 5px 0 10px;float:left" ng-show="card.shown" />
    </div>
  </ion-content>

…and here is the toggleFocus() function I’m using to toggle card.shown:

  var narrow = false;
  **$scope.toggleFocus** = function(tmsId) {
      narrow = !narrow;
      $scope.results.forEach(function(item){
          if(item.tmsId!=tmsId) {
              item.shown = (narrow==true) ? false : true;
          }
          if(item.tmsId==tmsId) {
              item.shown = true;
          }
      });
  }

If I set scrolling off:

  <ion-content class="has-header" **scroll="false"**>

…the show/hide works correctly, but there will be a longer list of text content under these images that I do want to scroll into view when the images toggle.

(with ion-content.scroll=“false”, ONE selected, ONE item doesn’t scroll but unwanted items are gone)

Screenshot

My deduction is that the scrolling is somehow breaking the item rendering. Any ideas how to fix? I’m using Angular 1.2.27 and ionic 1.0.0-beta.13 .

I tried $scope.$apply() at the end of toggleFocus, but Angular always complained that a digest cycle was already in progress.

I also tried changing <ion-content scroll=“false”> to <div> and the toggleFocus()/redraw worked as expected; this seems to further implicate ion-content.

Thank you,

~Todd


#2

Not exactly sure why, but the following code works correctly – with no change to the toggleFocus() function:

  <ion-content class="has-header" scroll="true">
    <div ng-repeat="card in results" title="{{card.title}}" 
width="{{itemWidth}}" 
style="display:inline-block; margin: 2% 2% 1%" 
ng-click="toggleFocus(card.tmsId)" 
ng-show="card.shown==true">
      <img ng-src="{{card.preferredImage}}" width="{{itemWidth}}">
    </div>
  </ion-content>