0

在这里，

我在 Restangular 和 angular-local-storage 的帮助下构建了一个 Angular.js 应用程序。我需要从 RESTFull 服务服务器中检索一些数据并将其分配给 $scope 变量。

我想知道如何在将所有数据加载到我的视图（html）之前等待所有数据加载。

这是我到目前为止所做的：

app.controller('InventoryController', function($scope, inventoryService) {                        
  $scope.productList = inventoryService.getProduces();
  console.log($scope.productList); // At that point, $scope.productList is null
});

app.service('inventoryService', function(entityService, browserStorageService) {
  entityService.allUrl('product', entityService.getBaseUrl).getList().then(function(data){
    console.log(data); // The data variable is not null here.
    browserStorageService.set('producList', data);
  });

  this.getProduces = function() {
    return browserStorageService.get('producList');
  };
});

app.service('browserStorageService', function(localStorageService) {
  localStorageService.clearAll();
  return localStorageService;
});

app.service('entityService', function(Restangular) {
  Restangular.setBaseUrl('http://localhost:8000/rest/');
  return Restangular;
});

我对 JavaScript 的异步特性一点也不满意，我敢肯定它很简单，但我无法弄清楚我能做些什么来纠正这种情况。

在第一次调用控制器时，数据不会加载到页面中，但是当我再次调用它而不重新加载应用程序时，数据就在那里。

谢谢你的帮助！

4

1 回答 1

1

inventoryService.getProduces();您必须在应用程序的配置部分中使用来自服务的数据创建解析对象，而不是调用控制器。之后，您可以访问传递给控制器​​的数据。

app.config(function($routeProvider){
    $routeProvider
    .when('/',{
        template:'',
        controller: 'InventoryController',
        resolve:{
            products: function(inventoryService) {
               return inventoryService.getProduces();
            }
        }
    });
});

app.controller('InventoryController', function($scope, products) {                        
    $scope.productList = products;
    console.log($scope.productList);
});

应根据您的应用程序结构设置模板和路由路径。

于 2014-07-22T18:49:30.710 回答