GET not refreshing on pulltorefresh


#1

For some reason my pull to refresh functionality stopped working after an update to the newer version of ionic.

  $scope.doRefresh =function() {
  $http.get('js/data.json').success(function(data) {
      $scope.artists = data;
      $scope.$broadcast('scroll.refreshComplete'); 
    });
  };

This used to work in rc1, but it doesn’t seem to work now. Here’s a repo with all of the code.

Here it is working
http://iviewsource.com/exercises/angularMobile/#/tab/list


#2

How did you implement the refresher in your template?

keep in mind, if you request failes your spinner is not ending.
So check if the path to the data.json is correct and can be loaded.


#3

Here’s how I implemented it into the template. The spinner does end and then it shows nothing.

<ion-content 
  class="has-subheader">
  <ion-refresher on-refresh="doRefresh()">
  </ion-refresher>
  <ion-list 
    show-delete="data.showDelete"
    show-reorder="data.showReorder">
    <ion-item ng-class="{'star': item.star}" 
    ng-repeat='item in artists | filter: query'
    class="item-thumbnail-left item-icon-right
      item-text-wrap" href="#/tab/list/{{item.shortname}}">
      <img ng-src="img/{{item.shortname}}_tn.jpg"
        alt="{{ item.name }} Photo">
      <h2>{{item.name}}</h2>
      <h3>{{item.reknown}}</h3>
      <p>{{item.bio | limitTo: 100}}
      {{ item.bio.length > 150 ? '&hellip;' : '' }}</p>
      <button class="button button-clear icon ion-star button-assertive"
        ng-click="toggleStar(item)"
        ng-show="item.star"></button>
      <ion-option-button class="button-dark"
        ng-click="toggleStar(item)">
        <i class="icon ion-star"></i>
      </ion-option-button>
      <ion-delete-button class="ion-minus-circled" ng-click="onItemDelete(item)">
      </ion-delete-button>
      <ion-reorder-button class="ion-navicon"
        on-reorder="moveItem(item, $fromIndex, $toIndex)">
      </ion-reorder-button>
    </ion-item>
  </ion-list>

#4

Okay then your request failes i think.

Take a look in your network or javscript console in e.g. google chrome developer tools.


#5

I get no feedback or errors whatsoever in the console.


#6

try to add logging to the error case:

$scope.doRefresh =function() {
  $http.get('js/data.json').then(function(data) {
    $scope.artists = data;
    console.log('it works', data);
  }, function () {
    console.log('an error occured', arguments);
  }).finally(function () {
    $scope.$broadcast('scroll.refreshComplete');
  });
};

#7

That’s peculiar. It says ‘it works’ and returns the object with the data, but the display is blank. It’s especially weird because before one of the updates, it worked fine. Here’s the refresh working properly. http://iviewsource.com/exercises/angularMobile/

What I get now is a seemingly empty list of records. http://imgur.com/6au1KRO. It’s like Angular isn’t able to draw the list.


#8

strange could you build up such an example with your new code?