angularjs：打开一个页面，然后只装载数据

Question

我当前的离子代码能够获取数据，然后打开网页。但是，我想打开页面，然后只加载以获取数据。我想改变序列，因为它需要10秒来加载一些数据。

这里是我的代码：

$scope.openDetail = function (stock) { 
    console.log(stock.symbol); 
    $ionicLoading.show(); 

    //stockCondition 
    if(stock.symbol.length<=$scope.stockCondition) { 
     $stockDataFactory.getStockDetails(stock).then(
     function success(data) { 
      $globalFactory.personalStockData = data.details; 
      $globalFactory.personalStockNews = data.news; 
      $ionicLoading.hide(); 
      $state.go("app.page1"); 

     }, 
     function error(error) { 
      alert(error.message); 
      console.error(error); 
      $ionicLoading.hide(); 
     } 
    ); 
    } 
    else{//WarrentCondition 
     $stockDataFactory.getWarrentDetails(stock).then(
     function success(data) { 

      $globalFactory.personalStockData = data.details; 
      $globalFactory.personalStockNews = {}; 
      $ionicLoading.hide(); 
      $state.go("app.page1"); 
     }, 
     function error(error) { 
      alert("Stocks Not Found."); 
      console.error(error); 
      $ionicLoading.hide(); 
     } 
    ); 
    } 
    };//end 

为了打开$state.go("app.page1");第一，那么只有将数据加载，我怎能做我的代码的变化？

Answer 1

您应该显示第1页的HTML模板。 我的方法是使用ng-if =“personalStockData”和$ setTimeout（）技巧来仅在加载数据时才显示数据。看起来是这样的

//page1 controller 
 
$stockDataFactory.getStockDetails(stock).then(
 
     function success(data) { 
 

 
      $setTimeout(function(){ 
 
      $scope.personalStockData = data.details; 
 
      $scope.personalStockNews = data.news; 
 
      
 
      }) 
 
     }, 
 
     function error(error) { 
 
      alert(error.message); 
 
      console.error(error); 
 
      $ionicLoading.hide(); 
 
     } 
 
    );

HTML

<div> 
 
... 
 
    <div ng-if="personalStockData"> 
 
    </div> 
 
    <div ng-if="personalStockNews"> 
 
    </div> 
 
... 
 
</div>

反正尽量不要使用全局变量，这些都是真的很难跟踪。

Answer 2

你必须把在decision数据是到app.page1明确当前页面。例如$scope.stockCondition。我怀疑这是stock.symbol相同。将不得不看什么stock变量是。

有很多种方法可以实现这一目标。使用查询字符串是一种选择，也是最传统的方式。有些人更喜欢将它们存储在cookies中，效率不高，但适用于某些使用情况。

同样，我不知道什么是$state。假设它是angular-ui-router的statemanager。然后你可以通过

$state.go("app.page1", { 
    stockCondition: $scope.stockCondition, 
    stocksymLen: stock.symbol.length 
}); 

然后在app.page控制器，你可以通过做$state.params.stockCondition检索查询字符串参数的值。

一旦你带来了decision变量跨越到下一个页面。下一步是将他们插入if-else您从另一页获得的声明到app.page1。

伪代码：

angular.module('blah') 
    .controller('app.page1', function($scope, $state) { 
     // on page load 
     if($state.params.stocksymLen <= $state.params.stockCondition) { 
      // do your REST call 
      ... 
     else { 
      ... 
     } 
});