在AngularJS和Ionic上呈现列表之前等待异步数据

发布时间：2020-12-17 17:20:43 所属栏目：安全来源：网络整理

导读：我是Angular JS的新手,但在使用 Javascript方面有很好的经验. 在我的应用程序中,我正在创建一个由来自Web服务的JSON数据实现的简单工厂： .factory('Tools',function($http) { var tools = {content:null}; var promise = $http.get('/Tool/GetTools').succe

我是Angular JS的新手,但在使用 Javascript方面有很好的经验.

在我的应用程序中,我正在创建一个由来自Web服务的JSON数据实现的简单工厂：

.factory('Tools',function($http) { 
    var tools = {content:null};
    var promise = $http.get('/Tool/GetTools').success(function(data) {
        tools.content = data;
        //At this points all the data is on tools.content
    });    
    return {
        promise:promise,all: function(){
            return tools;
            //At this point tools equals to null
        }
    }
});

但是当我想渲染列表时：

<ion-list>
      <ion-item ng-repeat="tool in tools">
        Hello,{{tool}}!
      </ion-item>
    </ion-list>

信息还没有.

我的控制器上有这个：

.controller('AccountCtrl',function($scope,Tools) {
  $scope.tools = Tools.all();
});

有没有办法在列表呈现之前从ajax调用加载Tools对象时告诉列表“等待”？

谢谢！

解决方法

您必须从工厂返回承诺并进入控制器,您可以检查成功.
像这样的东西：
(我已经模拟了超时的等待)

angular.module('App',[])

.controller('Ctrl',resultsFactory) {
  
  $scope.results = [{txt: 'Loading..'}];
  resultsFactory.all().then(
    function(res){
      $scope.results = res;
    },function(err){
      console.error(err);
    }
  );
})

.factory('resultsFactory',function($http,$timeout,$q) { 
  var results = {};  
  
  function _all(){
    var d = $q.defer();
      $timeout(function(){
            d.resolve([{txt:'one'},{txt:'two'},{txt:'three'}]);
     },2000); 
  
    return d.promise;       
  }
  
  results.all = _all;
  return results;
});

<!DOCTYPE html>
<html ng-app='App'>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.20/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div ng-controller='Ctrl'>
    <p ng-repeat='res in results'> {{res.txt}}</p>
  </div>
</body>
</html>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!