2017-02-12 74 views
0

我的网页的加载通过调用AWS S3桶listObjects功能。这基本上是一个异步调用,它可以在AWS S3中获得一堆对象。通过服务更新的控制器范围

这个工作正常,如果我把这个调用放在控制器中,然后执行$ scope。$ apply()当异步调用返回并处理所有数据时。

但是,每一页主要有做出的S3存储此相同的调用来填充网页,所以我基本上都粘贴到每个控制器相同的代码。

最明显的事情是移动这个代码到一个服务,但我怎么通过服务更新控制器的范围是什么?我无法在我的服务中执行$ scope。$ apply()。

如何让我的控制器调用服务知道异步调用已完成处理并更新控制器中的$ scope变量?

感谢您的帮助。

回答

2

我会建议利用Promises和角$q服务。为此,只需创建一个返回Promise的服务函数。然后,您可以等待这一承诺在您的控制器,如果它得到解决,您可以分配给控制器的$scope的响应。如果我使用的路线正确

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

app.controller('demoCtrl', function(demoService) { 

    var self = this; 

    self.init = init; 
    self.list = {}; 

    init(); 

    function init() { 

    console.log("call async Service Method"); 
    demoService.getListObjects() 
     .then(function (list) { 
     console.log("received", list); 
     // Assign Response to the Scope 
     self.list = list; 
     }); 
    } 
}); 


app.service('demoService', function($q) { 
    var self = this; 

    self.getListObjects = getListObjects; 

    function getListObjects() { 
    var deferred= $q.defer(); 

    // Simulate Async Action 
    setTimeout(function() { 
     var list = {}; 
     deferred.resolve(list); 
    }, 1000); 

    return deferred.promise; 
    } 
}); 
+0

谢谢,我会玩这个,稍后再回来看看。 – MatTaNg

0

可以返回从服务方法的对象的阵列和在控制器呼叫方法指定。

服务:

angular 
     .module('app') 
     .service('servS3', servS3); 

function servS3() 
{ 
    var service = { 
     gets3List = gets3List 
    }; 
    return service; 

    function gets3List(){ 
     //Write your logic and return array of s3 List 

    }; 
} 

控制器:

$scope.s3ListObject = []; 

servS3.gets3List() 
.then(function(response){ 
    $scope.s3ListObject = response.data; 
}); 

而且,如果缓存可以做到的话,尝试登录时缓存此S3Data(在sessionStorage的),而不是装载数据每次都可能影响性能。

+0

我不应该担心缓存:

plunkr(检查开发工具)

我创建了一个简单的演示?我认为默认情况下会缓存你的路由状态。 – MatTaNg

+0

我正在谈论数据缓存。如果AWS S3 Bucket中的列表对象不会逐页不同,则只调用一次该方法并将其存储在会话存储中。这将避免多次往返AWS s3存储桶的列表对象功能。 – Kalyan

相关问题