我开始在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; } });
现在您可以看到,如果此应用程序越来越大,它将变得非常混乱。处理数据以便在控制器之间持久保存的最佳方法是什么?
您可以通过创建自己的服务来跨控制器保留数据,如本博客中所述。 在您的情况下,您可以将您的savePeopleResponse和getPeopleResponse转移到服务中,然后将服务注入您想访问它的任何控制器中。
savePeopleResponse
getPeopleResponse
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"
ng-app="myApp"