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

时间:2021-07-16 22:58:35

I want to display view once the list of content is retrieved from the database display it in the view.

我想在从数据库中检索内容列表后显示视图,在视图中显示它。

On a high level what I am doing now works more or less but upon first access the previous results appears to be cached or still saved in my storage service.

从高层次来看,我现在正在做的工作或多或少,但在第一次访问时,先前的结果似乎被缓存或仍保存在我的存储服务中。

This is what the service looks like.

这就是服务的样子。

function StorageService() {

    var opportunities;

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

So when I click on the tab to getOpportunities I go direct to the view first and the load the data.

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

$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) {})

}

once the view is rendered I retrieve the results and bind it to the view.

渲染视图后,我检索结果并将其绑定到视图。

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

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

What I am doing here also feels a bit wrong.

我在这里做的也感觉有点不对劲。

Is there a better way or a way that I can improve on the existing.

有没有更好的方法或方法可以改善现有的方法。

I want to load the view and the replace the loader with the data once the data is ready.

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

Thanks in advance

提前致谢

1 个解决方案

#1


1  

You should resolve the promise in the route, using the resolve property. That way, the data will always be available when the controller is instantiated.

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

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

Unless the resource is huge and you want to show som loading animation while getting the data. Then it would probably be more proper to just get the data in the controller.

除非资源很大,并且您希望在获取数据时显示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>

Also, there is no use to have getter and setters in the service. Javascript objects are passed by reference so you can just expose the property directly.

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

#1


1  

You should resolve the promise in the route, using the resolve property. That way, the data will always be available when the controller is instantiated.

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

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

Unless the resource is huge and you want to show som loading animation while getting the data. Then it would probably be more proper to just get the data in the controller.

除非资源很大,并且您希望在获取数据时显示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>

Also, there is no use to have getter and setters in the service. Javascript objects are passed by reference so you can just expose the property directly.

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