5

Hi I have two controllers

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

and

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

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.

2 Answers 2

1

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

(I took dummy URL only to load data by async 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; 
  });

Demo Fiddle

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

2
  • yes it works, but one more question. I must declare watch inside the service factory?
    – m0rjjj
    Dec 11, 2013 at 10:32
  • no, you don't. Factory is like singleton. has one instance and all controllers use the same service. you can add watch to controller and listen on change in service Dec 11, 2013 at 10:34
0

Try this

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

Basically do not create a new array but fill the existing one.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.