将数据传递给其他 ng-view 并在控制器之间持久化的更好设计 [英] Better design for passing data to other ng-view's and persisting it across controllers

问题描述

我开始使用 AngularJS 进行开发.我很困惑这是否是在我的部分视图之间传递数据的正确设计.

现在我有一个加载器页面，我可以在其中执行一些请求.

function PeopleController($scope,$http,$location){$http.get('/location/-79.18925/43.77596').成功(功能(数据){$scope.savePeopleResponse(data);$location.url('/test');});}

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

我只是打电话

<div class="blueitem">{{getResultForPeople()|json}}</div>

[结果控制器]

 函数 resultController($scope){$scope.getResultForPeople = function(){返回 $scope.getPeopleResponse();}}

savePeopleResponse 和 getResultForPeople 被缓存"在 rootScope 中

app.run(function($rootScope) {var peopleResponse = {};$rootScope.savePeopleResponse = 函数(数据){peopleResponse = 数据；控制台日志(数据)；}$rootScope.getPeopleResponse = function(){返回人响应；}});

现在如您所见，如果此应用程序变得越来越大，这将变得非常混乱.处理数据以使其跨控制器持久化的最佳方法是什么?

解决方案

您可以通过 创建您自己的服务 如this博客.您也可以参考这个问题.

在您的情况下，您可以将 savePeopleResponse 和 getPeopleResponse 移动到一个服务中，然后将该服务注入到您想要访问它的任何控制器中.

angular.module('myApp', []).factory('peopleService', function () {var peopleResponse = {};返回 {savePeopleResponse:函数(数据){peopleResponse = 数据；控制台日志(数据)；},getPeopleResponse:函数(){返回人响应；}};});

你的控制器是这样的:

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

使用此代码示例，请确保包含 ng-app="myApp"

I started developing in AngularJS. I'm confused as to whether this is a proper design to pass data between my partial views.

Right now I have a loader page where I do some request.

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

Then in the view that gets loaded for /test

I am just calling

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

[resultController]

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

and the savePeopleResponse and getResultForPeople are "cached" in the rootScope as such

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

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

Now as you can see, this will get very messy if this application grows larger and larger. What's the best way to handle data so that it's persisted across controllers?

解决方案

You can persist data across controllers by creating your own service as described nicely in this blog. You can also refer to this question.

In your case you can move your savePeopleResponse and getPeopleResponse into a service and then inject the service into any controllers you would like to access it.

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

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

With your controller something like this:

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

With this code example make sure you include ng-app="myApp"

这篇关于将数据传递给其他 ng-view 并在控制器之间持久化的更好设计的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！