小编典典

更好的设计,可将数据传递到其他ng-view并在控制器之间持久保存

angularjs

我开始在AngularJS中进行开发。我对这是否是在局部视图之间传递数据的适当设计感到困惑。

现在我有一个加载器页面,我在其中进行一些请求。

function PeopleController($scope,$http,$location){
    $http.get('/location/-79.18925/43.77596').
    success(function(data){
      $scope.savePeopleResponse(data);
      $location.url('/test');
    });
}

然后在为/ test加载的视图中

我只是在打电话

<div ng-controller="resultController">
    <div class="blueitem">{{getResultForPeople()|json}}</div>
</div>

[resultController]

    function resultController($scope){
      $scope.getResultForPeople = function(){
     return $scope.getPeopleResponse();
    }
}

并且savePeopleResponse和getResultForPeople会像这样在rootScope中“缓存”

app.run(function($rootScope) {
  var peopleResponse = {};
  $rootScope.savePeopleResponse = function(data) {
   peopleResponse = data;
   console.log(data);
  }

  $rootScope.getPeopleResponse = function(){
    return peopleResponse;
  }
});

现在您可以看到,如果此应用程序越来越大,它将变得非常混乱。处理数据以便在控制器之间持久保存的最佳方法是什么?


阅读 207

收藏
2020-07-04

共1个答案

小编典典

您可以通过创建自己的服务来跨控制器保留数据,如本博客中所述
在您的情况下,您可以将您的savePeopleResponsegetPeopleResponse转移到服务中,然后将服务注入您想访问它的任何控制器中。

angular.module('myApp', [])
    .factory('peopleService', function () {
        var peopleResponse = {};

        return {
            savePeopleResponse:function (data) {
                peopleResponse = data;
                console.log(data);
            },
            getPeopleResponse:function () {
                return peopleResponse;
            }
        };
    });

使用您的控制器,如下所示:

function resultController ($scope, peopleService) {
    $scope.getResultForPeople = peopleService.getPeopleResponse;
}

通过此代码示例,请确保您包括 ng-app="myApp"

2020-07-04