-1

I searched a lot about this, and although I found some similar problems, they are not exactly what I want.

Imagine this kind of code:

angular
    .module('foobar', ['ngResource'])
    .service('Brand', ['$resource', function($resource){
        return $resource('/api/v1/brands/:id', { id: '@id' });
    }])
    .service('Product', ['$resource', function($resource){
        return $resource('/api/v1/products/:id', { id: '@id' });
    }])
    .controller('ProductController', ['$scope', 'Brand', function($scope, Brand){
        $scope.brands = Brand.query();
    }])
    .controller('BrandController', ['$scope', 'Brand', function($scope, Brand){
        this.create = function() {
            Brand.save({label: $scope.label });
        };
    }])

For the moment, I'm using $broadcast and $on

In brand controller:

Brand.save({label: $scope.label }, function(brand){
    $rootScope.$broadcast('brand-created', brand);
});

In product controller:

$scope.$on('brand-created', function(brand){
    $scope.brands.push(brand);
});

It works, but I don't like this way of sync'ing datas.

Imagine you have 10 controllers which must be sync'ed, you should write the $scope.$on part in each. And do the save for each services...

Is there a better way to keep collection sync'ed wherever they are used?

Byscripts
  • 2,578
  • 2
  • 18
  • 25

1 Answers1

0

Yes - using a shared service. I've used http in my example, but you could fairly easily substitute it with $resource. The main point over here is to keep an in memory copy of the list of the brands. This copy is referred by the productscontroller and whenever it is updated it will automatically reflect. You simply need to ensure that you update it correctly after making the $http put / resource put call.

http://plnkr.co/edit/k6rwS0?p=preview

angular.module('foobar', [])
  .service('Brand', ['$http', '$q',
    function($http, $q) {

      var brandsList;

      return {
        getBrands: function() {
          var deferred = $q.defer();

          //if we have not fetched any brands yet, then we'll get them from the api
          if (!brandsList) {
            $http.get('brands.json').then(function(response) {
              brandsList = response.data;
              console.log('brands:' + brandsList);

              deferred.resolve(brandsList);
            });

          } else {
            deferred.resolve(brandsList);
          }


          return deferred.promise;
        },
        save: function(newBrand) {

          // $http.put('brands.json', newBrand).then(function(){
          //   //update the list here on success
          // brandsList.push(newBrand)
          // })

          brandsList.push({
            name: newBrand
          });
        }
      };
    }])
  .controller('productsController', ['$scope', 'Brand',
    function($scope, Brand) {
      Brand.getBrands().then(function(brands) {
        $scope.brands = brands;
      })
    }
  ])
  .controller('brandsController', ['$scope', 'Brand',
    function($scope, Brand) {
      $scope.create = function() {
        Brand.save($scope.label);
      };
    }
  ])
Abhinav Gujjar
  • 2,570
  • 2
  • 25
  • 35