2017-07-11 8 views
1

ホームページでion-refresherの使い方を知りたい。私はそこに表示されているデータを更新できるようにしたいと思いますし、私のコントローラでそれを行う方法はわかりません。 データベースを使用した例が見つからないため、誰かが私を助けてくれました。イオンリフレッシャーの使い方

マイコントローラ:

.controller('homeCtrl', function ($scope, $state, $http, $ionicLoading, AppService) { 
     console.log("called"); 
     $ionicLoading.show(); 
     AppService.user().then(function (response) { 
      $scope.prenom = response.pnom; 
     }); 
     AppService.statNational().then(function (response) { 
      $scope.nbVisite = response.nbVisite; 
     }); 
     AppService.CRlist().then(function (response) { 
      $scope.liste = JSON.parse(JSON.stringify(response)); 
      $scope.limit = 3; 
      $ionicLoading.hide(); 
     }); 
     $scope.showDescr = function (currObj) { 
      AppService.addObject(currObj); 
      $state.go('menu.compteRendu'); 
     } 
     AppService.refreshToken().then(function (response) { 
      if ($scope.token) { 
      console.info('Refresh'); 
      } 
     }); 
     }) 

私の見解:

<ion-view title="Home" hide-back-button="true" id="page1"> 
     <ion-nav-buttons side="left"> 
     <button menu-toggle="left" class="button button-icon button-clear ion-navicon menu-icon"></button> 
     </ion-nav-buttons> 
     <ion-content padding="true" class="has-header"> 
     <ion-refresher on-refresh="doRefresh(true)"> 
     <ion-refresher-content 
      pullingIcon="arrow-dropdown" 
      pullingText="Pull to refresh" 
      refreshingSpinner="circles" 
      refreshingText="Refreshing"> 
     </ion-refresher-content> 
     </ion-refresher> 
     <div id="accueil-markdown4" style="text-align:center;" class="show-list-numbers-and-dots"> 
      <p style="color:#2f81b7;font-size:20px;">Hello {{ prenom | UpFirstLetter }} !</p> 
     </div> 
     <hr/> 
     <div class="item-verte"> 
      <ion-list id="accueil-list14"> 
      <ion-item class="item-thumbnail-left accueil-item-vert" id="accueil-list-item35"> 
       <h2 class="accueil-blanc">Décompte Visites</h2> 
       <p class="accueil-blanc">Le nombre de visites réalisées</p> 
       <img class="icon-accueil" src="img/icon-acceuil-1.png"> 
      </ion-item> 
      </ion-list> 
      <div class="item item-body" id="accueil-list-item-container6"> 
      <div id="accueil-markdown13" class="show-list-numbers-and-dotss"> 
       <p>{{nbVisite || 'Chargement..'}} Visites</p> 
      </div> 
      </div> 
     </div> 
     <div class="spacer"></div> 
     <div class="accueil-container4"> 
      <ion-list id="accueil-list12"> 
      <ion-item class="item-thumbnail-left" id="accueil-list-item36"> 
       <h2 class="accueil-blanc">Dernières Visites</h2> 
       <p class="accueil-blanc">Les comptes-rendus des visites</p> 
       <img class="icon-accueil" src="img/icon-acceuil-2.png"> 
      </ion-item> 
      <ion-item class="item-icon-right blanc-cr" id="accueil-list-item31" ng-repeat="element in liste | limitTo:limit"> 
       <div class="compte-rendu-style" ng-click="showDescr(element)"> 
       <div> 
        <span style="font-weight:bold">Compte-rendu</span> 
        <span> {{ element.dateVisite.date | dateOnly: "dd MMMM y"}}</span> 
        <div class="item-note"> 
        <p class="capitalize" ng-bind-html="element.patientPnom">{{ element.patientPnom | UpFirstLetter }} </p> 
        <i class="icon ion-ios-arrow-right icon-cr"></i> 
        </div> 
       </div> 
       </div> 
      </ion-item> 
      </ion-list> 
     </div> 
     <hr/> 
     </ion-content> 
    </ion-view> 

は、あなたのコントローラでそれを行うことができ、あなたの答えを事前に

+0

あなたは 'doRefresh'関数でデータAPIを呼び出す必要があります。 'doRefresh'でコントローラ名に関数を作成し、data APIを呼び出してdoRefreshの中で初めて同様にデータ解析を行います。 – sonu

答えて

1

ありがとう:

$scope.doRefresh= function() { 
    AppService.statNational().then(function (response) { 
    $scope.nbVisite = response.nbVisite; 
    }); 
    AppService.CRlist().then(function (response) { 
    $scope.liste = JSON.parse(JSON.stringify(response)); 
    $scope.limit = 3; 
    $ionicLoading.hide(); 
    }); 
    $scope.$broadcast('scroll.refreshComplete'); 
}; 
$scope.doRefresh(); 

とあなたのビューでは:

<ion-refresher on-refresh="doRefresh()"> 
    <ion-refresher-content 
     pullingIcon="arrow-dropdown" 
     pullingText="Pull to refresh" 
     refreshingSpinner="circles" 
     refreshingText="Refreshing"> 
    </ion-refresher-content>