2017-02-12 45 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