Question

如何使用我设置的函数之外的totalResults？我只是无法绕过如何做到这一点，我需要使用从数据库中收集的totalResults并使用另一个函数来计算页面数量。我这样做所以我不会将所有数据加载到客户端，但我仍然需要知道数据库表中的总行数。

我的json看起来像是：

Object {total: 778, animals: Array[20]}

角：

var app = angular.module('app', []);

app.controller('AnimalController', ['$scope', 'animalSrc', function($scope, animalSrc)
{
    $scope.animals = [];

    var skip = 0;
    var take = 20;
    var totalResults = null;
    //$scope.totalResults = null;

    $scope.list = function()
    {
        animalSrc.getAll(skip, take, function(data) {
            $scope.animals = $scope.animals.concat(data.animals);

            // I need to be able to use this outside of function ($scope.list)
            totalResults = data.total;
            //$scope.totalResults = data.total;
        });
    };

    $scope.showMore = function()
    {
        skip += 20;
        $scope.list();
    };

    $scope.hasMore = function()
    {
        //
    };

    // Outputs null, should be the total rows from the $http request
    console.log(totalResults); 
}]);

app.factory('animalSrc', ['$http', function($http)
{
    // Private //

    return {
        getAll: function(skip, take, callback)
        {
            $http({
                method: 'GET',
                url: 'url' + skip + '/' + take
            }).
            success(function(data) {
                callback(data);
            }).
            error(function(data) {
                console.log('error: ' + data);
            });
        }
    };
}]);

Answer 1

你需要开始异步思考。在$ http返回并设置了totalResults之前调用了console.log。因此，totalResults将始终为null。

您需要找到一些方法来延迟对console.log的调用，以便在运行console.log之前完成$ http调用。一种方法是将console.log调用放在回调函数中，以便在$ http成功后调用它。

更优雅的方法是使用promises。 angular.js实现$ q，类似于Q，一个promise库。

http://docs.angularjs.org/api/ng.$q

不是在getAll中创建回调函数，而是返回一个promise。在$ http成功之内，您可以使用数据解决承诺。然后，在您的控制器中，您有一个在解析promise时调用的函数。 Promise很好，因为它们可以被传递，它们允许您无阻塞地控制异步代码的流。

Answer 2

这是我正在为自己进行类似设置的样板文件，其中数据是一个需要拆分成多个范围项的对象。您没有意识到的问题是将数据存储在服务中，而不仅仅是使用服务来检索数据。然后通过注入服务

在多个控制器和指令中提供数据项

app.run(function(MyDataService){
  MyDataService.init();
})

app.factory('MyDataService',function($http,$q){

  var myData = {
    deferreds:{},

    mainDataSchema:['count','items'],
    init:function(){
      angular.forEach(myData.mainDataSchema,function(val,idx){ 
        /* create deferreds and promises*/
        myData.deferreds[val]=$q.defer();
        myData[val]= myData.deferreds[val].promise
      });     
      /* load the data*/
      myData.loadData();

    },     

    loadData:function(){
         $http.get('data.json').success(function(response){
           /* create resolves for promises*/
           angular.forEach(myData.mainDataSchema,function(val,idx){            
             myData.deferreds[val].resolve(response[val]);
        });
       /* TODO -create rejects*/

      })

    }
  }

  return myData;

  })

app.controller('Ctrl_1', function($scope,MyDataService ) {
    $scope.count = MyDataService.count;
    $scope.items =MyDataService.items;
});

app.controller('Ctrl_2', function($scope,MyDataService ) {
  $scope.items =MyDataService.items;
  $scope.count = MyDataService.count;
});

Plunker demo

如何在其他控制器中使用来自$ http的数据

2 个答案: