在角使用服务共享多个控制器之间的数据阿贾克斯 [英] Sharing ajax data between multiple controllers in angular using service

问题描述

您好我有两个控制器

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

和

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

我需要创建一个项目的服务，会做一个Ajax请求以及这将对它注入任何控制器返回数据。我想，查询将只能一次完成，项目将所有控制器之间共享。

I need to create an "items" service that would do an ajax request and return data for any controller which would have it injected. And I want, that the query will be done only once, and items will be shared between all controllers.

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;
});

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

But I don't understand why angular makes the request, and receives data, but all items in controllers are empty.

推荐答案

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

It happens because the factory should be defined by different way.

的（我把假的网址只加载由异步方式的数据）的

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>

JS

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; 
  });

演示<大骨节病> 小提琴

从这个例子我们称之为 items.getList（）从HTML两个控制器。但是，如果我们要更新通过控制​​器的模式，我们需要像 $一个监听器观看

From this example we call items.getList() from HTML for both controllers. But if we want to update the model through the controller, we need a listener like $watch

这篇关于在角使用服务共享多个控制器之间的数据阿贾克斯的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！