Ionic refreshing a certain part of the page

Is it possible to refresh a certain part of the page not the entire page?

I believe the nested ui-view(s) inside your <ion-view> would do the trick

I don’t know what exactly you’re trying to refresh but this is a way to do it if you want to refresh data from a server.

  1. Don’t set “cache:false” on the state so your controller and view doesn’t load every time you go to the page.

  2. Have your data getter in a function so that you can call it in the scenarios below. The point is the load the data the first time and reuse it sometime later.

Refresh the data every 10 seconds

$interval(loadData, 10000);

Refresh the data whenever you enter the state

$scope.$on('$ionicView.enter', function(event, data) {
  loadData();  
});

Refresh the data by pulling down the page

<ion-content ng-controller="MyController">
  <ion-refresher
    pulling-text="Pull to refresh..."
    on-refresh="doRefresh()">
  </ion-refresher>
  <ion-list>
    <ion-item ng-repeat="item in items"></ion-item>
  </ion-list>
</ion-content>

angular.module('testApp', ['ionic'])
.controller('MyController', function($scope, $http) {
  $scope.items = [1,2,3];
  $scope.doRefresh = function() {
    $http.get('/new-items')
     .success(function(newItems) {
       $scope.items = newItems;
     })
     .finally(function() {
       // Stop the ion-refresher from spinning
       $scope.$broadcast('scroll.refreshComplete');
     });
  };
});