Question

我希望在从数据库中检索到内容列表后显示视图，并在视图中显示它。

从高层次来看，我现在正在做的工作或多或少，但在首次访问时，之前的结果似乎已缓存或仍保存在我的存储服务中。

这就是服务的样子。

function StorageService() {

    var opportunities;

    var getOpportunities = function() {
        return opportunities;
    }
    var setOpportunities = function(data) {
        opportunities = data;
    }
    return {
        getOpportunities: getOpportunities,
        setOpportunities: setOpportunities
    }
}

因此，当我点击选项卡以获取机会时，我首先直接进入视图并加载数据。

$scope.getAllOpportunities = function() {
$state.go("app.opportunities");
communicationService.getOpportunitiesAll().then(function(data) {
    StorageService.setOpportunities(data);
    if (!data.length) {
        $("#noShow").html("There are no opportunities");
    }
}, function(error) {})

}

一旦呈现视图，我将检索结果并将其绑定到视图。

controller('OpportunitiesController', function($scope) {

$scope.$on("$ionicView.afterEnter", function(scopes, states) {
    $scope.opportunities = StorageService.getOpportunities();
});

我在这里做的事情也有些不对。

是否有更好的方法或方法可以改善现有的方式。

我想加载视图，并在数据准备好后用数据替换加载器。

提前致谢

Answer 1

您应该使用resolve属性解决路径中的promise。这样，当实例化控制器时，数据将始终可用。

https://toddmotto.com/resolve-promises-in-angular-routes/

除非资源很大，否则你想在获取数据时显示som加载动画。那么在控制器中获取数据可能更合适。

controller('OpportunitiesController', function($scope) {

    communicationService.getOpportunitiesAll().then(function(response){
        $scope.opportunities = response;
    })

});

HTML：

<span ng-if="!opportunities">Getting stuff</span>
<span ng-if="opportunities">Stuff fetched</span>

此外，服务中没有getter和setter也没用。 Javascript对象通过引用传递，因此您可以直接公开属性。

将列表数据从控制器传输到另一个控制器的最佳实践

1 个答案: