離子視圖轉換閃爍問題

我調用API並返回綁定響應$ionicView.beforeEnter。但是，輸入視圖時，有時會加載視圖，但數據在數秒後纔會綁定，尤其是在網絡連接不良的情況下。這個問題怎麼解決？離子視圖轉換閃爍問題

這是因爲我的API調用是異步的嗎？

angular.module('app').controller(function($scope, ApiMethod) { 
    $scope.$on("$ionicView.beforeEnter", function(event, data){ 
     ApiMethod.GetFormInfo().$promise.then(function (res) { 
      $scope.res = res; 
     }, function (errRes) { 

     }) 
    }); 
}); 

<ion-content> 
    <form name="form"> 
     <div class="list"> 
      <label class="item item-input"> 
      <input type="text" placeholder="First Name" ng-model="res.firstName"> 
      </label> 
      <label class="item item-input"> 
      <input type="text" placeholder="Last Name" ng-model="res.lastName"> 
      </label> 
      <label class="item item-input"> 
      <textarea placeholder="Comments" ng-model="res.comments"></textarea> 
      </label> 
     </div> 

     <button type="submit">Submit</button> 
    </form> 
</ion-content>

來源

2016-06-10 vincentsty

提供您的控制器和視圖代碼。我有一個解決方案，但需要你的代碼來實現它。 – theblindprophet

@theblindprophet您好我已更新我的問題中的代碼 – vincentsty

是的，有因爲暫停異步調用ApiMethod的閃爍。要優雅地處理我的離子應用程序，我使用$ionicLoading。這將「凍結」用戶移動，直到數據被加載。我相信最好通知他們的裝載，然後讓他們質疑一個空白的視圖。

實現：

angular.module('app').controller(function($scope, ApiMethod, $ionicLoading) { 

    $scope.show = function() { 
     $ionicLoading.show({ 
      template: 'Loading...' 
     }).then(function(){ 
      console.log("The loading indicator is now displayed"); 
     }); 
    }; 
    $scope.hide = function(){ 
     $ionicLoading.hide().then(function(){ 
      console.log("The loading indicator is now hidden"); 
     }); 
    }; 

    $scope.$on("$ionicView.beforeEnter", function(event, data){ 
     // Show loading 
     $scope.show(); 
     ApiMethod.GetFormInfo().$promise.then(function (res) { 
      $scope.res = res; 
      // Hide loading 
      $scope.hide(); 
     }, function (errRes) { 

     }) 
    }); 
});

參考：$ionicLoading

來源

2016-06-10 15:45:20 theblindprophet

離子視圖轉換閃爍問題

回答

相關問題