使用服务以角度在多个控制器之间共享ajax数据答案

【问题标题】：Sharing ajax data between multiple controllers in angular using service使用服务以角度在多个控制器之间共享ajax数据
【发布时间】：2013-12-11 06:51:09
【问题描述】：

您好，我有两个控制器

pqsAppModule.controller('NotificationBoxController',function($scope,items) {
    $scope.list = items.list();
})

和

pqsAppModule.controller('NotificationController',function($scope,items) {
    $scope.list = items.list();
})

我需要创建一个“项目”服务，该服务将执行 ajax 请求并为任何将其注入的控制器返回数据。而且我希望查询只执行一次，并且项目将在所有控制器之间共享。

pqsAppModule.factory('items', function($http) {
    var items = [];
    var itemsService = {};
    $http.get('api/notification').then(function(response){
        items = response.data;
    });

    itemsService.list = function() {
        return items;
    };

    return itemsService;
});

但我不明白为什么 Angular 发出请求并接收数据，但控制器中的所有项目都是空的。

【问题讨论】：

标签： angularjs

【解决方案1】：

这是因为工厂应该以不同的方式定义。

（我使用虚拟 URL 只是为了通过异步方式加载数据）

HTML

<div ng-controller="NotificationBoxController">
    <button ng-click="showMe();">press  me</button>
    <pre>NotificationBoxController: {{items.getList()|json}}</pre>
</div>

<div ng-controller="NotificationController">
    <pre>NotificationController: {{items.getList()|json}}</pre>
</div>

var pqsAppModule = angular.module('myApp', []);
pqsAppModule.controller('NotificationBoxController',function($scope,items) {
    $scope.items = items;

    $scope.showMe= function(){
     items.query();   
    }
});

pqsAppModule.controller('NotificationController',function($scope,items) {
    $scope.items = items;
});


pqsAppModule.factory('items', function ($http) {

    var current = {};    

    var address = 'Singapore, SG, Singapore, 153 Bukit Batok Street 1';
    var URL = 'http://maps.googleapis.com/maps/api/geocode/json?address=' + address + '&sensor=true';

       var factory = {            
           query: function () {                
                var data = $http({method: 'GET', url:URL}).then(function (result) {
                           current = result.data.results[0];                            
                        }, function (result) {
                            alert("Error: No data returned");
                        });  
            },
            getList: function () {                
               return current;
            }
       }       
        return factory; 
  });

演示Fiddle

在这个例子中，我们从 HTML 中为两个控制器调用 items.getList()。但是如果我们想通过控制器更新模型，我们需要像$watch这样的监听器

【讨论】：

是的，它有效，但还有一个问题。我必须在服务工厂内声明手表？
不，你没有。工厂就像单身。有一个实例，所有控制器都使用相同的服务。您可以将手表添加到控制器并监听服务的变化

【解决方案2】：

试试这个

  $http.get('api/notification').then(function(response){
        angular.foreach(response.data,function(item) {
            items.push(item);
        });
    });

基本上不创建新数组而是填充现有数组。

【讨论】：