Angular.JS 在控制器之间共享一个 JSON 对象答案

【问题标题】：Angular.JS share a single JSON object between controllersAngular.JS 在控制器之间共享一个 JSON 对象
【发布时间】：2014-09-09 03:24:42
【问题描述】：

我正在尝试使用 Angular.JS 编写一个 CRUD 应用程序，我需要你的帮助才能继续前进。这是场景：

视图 1（索引）从远程 API 获取 JSONP 数据并将其存储。
视图 2（主视图）显示在网格上过滤的数据
视图 3（详细）显示在视图 2 上选择的特定项目

我已经这样做了，但是在每个视图上请求相同的 JSON 对象，但我认为只有一个 api 调用就足够了。

我不知道如何正确地为所有控制器共享这个 JSON 对象。我尝试了几个关于 ngResource、$http、工厂和服务的教程，但仍然没有明确的路径。

我该怎么做？

您可能分享的任何 sn-p 或代码示例对于继续尝试这件事非常有用...

提前致谢，

爱丽儿

【问题讨论】：

您可以使用服务来存储数据。但我宁愿建议只传递 id 并进行另一个 api 调用以从服务器获取最新数据......这样你就可以避免过时的数据更新/查看问题......类似于@Jason 的回答

标签： angularjs jsonp

【解决方案1】：

使用服务来缓存和跨控制器共享数据将是可行的方法。由于 Angular 中的服务是单例的，因此可以共享相同的数据副本。诸如

之类的服务

angular.module('myApp').factory('dataService', function($q, $resource) {
  var items=[];
  var service={};
  service.getItems=function() {
     var itemsDefer=$q.defer();
     if(items.length >0) 
        itemsDefer.resolve(data);
     else
     {
          $resource(url).query({},function(data) {
             items=data;
             itemsDefer.resolve(data)
          });        
     }
     return itemsDefer.promise;
  }
  return service;
});

现在您可以在控制器中注入 dataService 并调用 getItems 方法。此方法返回一个承诺，该承诺可以使用缓存数据或通过远程请求来解决。控制器代码看起来像

angular.module('myApp').controller('MyCtrl', function($scope,dataService) {
    dataService.getItems().then(function(items) {
        $scope.items=items;
    }
});

【讨论】：

谢谢@Chandermani！请问，您也可以添加控制器代码吗？ BTW 你的服务逻辑一清二楚！undefined"...
添加了控制器，但 promise 声明存在问题，它必须在 getItems 函数中。

【解决方案2】：

您可以实现一个基本控制器来存储控制器之间共享的通用功能。我最近写了一篇关于它的blog post，这里的代码 sn-p 展示了它是如何工作的：

'use strict';

angular.module('Diary')

// base controller containing common functions for add/edit controllers
.controller('Diary.BaseAddEditController',
    ['$scope', 'DiaryService',
    function ($scope, DiaryService) {
        $scope.diaryEntry = {};

        $scope.saveDiaryEntry = function () {
            DiaryService.SaveDiaryEntry($scope.diaryEntry);
        };

        // add any other shared functionality here.
    }])

.controller('Diary.AddDiaryController',
    ['$scope', '$controller',
    function ($scope, $controller) {
        // instantiate base controller
        $controller('Diary.BaseAddEditController', { $scope: $scope });
    }])

.controller('Diary.EditDiaryController',
    ['$scope', '$routeParams', 'DiaryService', '$controller',
    function ($scope, $routeParams, DiaryService, $controller) {
        // instantiate base controller
        $controller('Diary.BaseAddEditController', { $scope: $scope });

        DiaryService.GetDiaryEntry($routeParams.id).success(function (data) {
            $scope.diaryEntry = data;
        });
    }]);

【讨论】：