Updating the scope variable across multiple controllers in angularjs

Question

I have two controllers- searchBoxController and productList. What I am trying to do is to update the scope variable $scope.products from multiple controllers. I know that defining it as a root variable is a very bad design- but putting that in shared service is not solving the problem. The update doesn't reflect in the HTML templates!

function SearchTermService(){
    this.productSearch = function(data, $http){
        var url = "";
        $http.get(url).then(function(resp){
            return resp.data;
        },
        function(err){
            console.log(err);
        });
    };
};

var app = angular.module('app', []);
app.service("myService", MyService);
app.service("searchTermService", SearchTermService);
app.run(function($rootScope) {
    $rootScope.products = new Date();
});

app.controller('productList', function ($scope, $rootScope, $http, myService) {
    $rootScope.products = prod_res;
});



app.controller('searchBoxController', function($scope, $http, searchTermService, $rootScope){
        $scope.getSearchResults = function(){
        $rootScope.products = searchTermService.productSearch($scope.term, $http)
    };
});

PS: I am not sure if I need to have a promise returned while assigning the $rootScope.products in 'searchBoxController', as the console.log says its undefined. Currently I am not returning a promise from the service.

this code doesn't appear to be using a shared service, rather it appears to be using $rootScope. — Claies
– Claies, Commented Sep 22, 2015 at 13:35
I had put the shared service code- ref: stackoverflow.com/questions/21919962/…. But since it was not working- I got back to using to $rootScope — Ajay Pal Singh
– Ajay Pal Singh, Commented Sep 22, 2015 at 13:42

Paul Boutes · Accepted Answer · 2015-09-22 14:02:46Z

10

In order to update a scope variable across multiple controller, you can use angular service.

You should use this because all angular services are singletons, so you can easily share common logic, share data between controller.

I've made an example where I use service in order to update some data. Then, my factory return an object data, so we will get an object, not just a fixed value. Thanks to this, our data will be updated, we will keep the binding data.

Controller

(function(){

function Controller($scope, $timeout, Service) {

  //Retrieve current data object of our service
  $scope.data = Service.value;

  //will be set to 4
  $timeout(function(){
    Service.set(4, 'product');
  }, 1000);

}

angular
.module('app', [])
.controller('ctrl', Controller);

})();


(function(){

function Controller2($scope, $timeout, Service) {

  //Retrieve current data object of our service
  $scope.data2 = Service.value;

}

angular
.module('app')
.controller('ctrl2', Controller2);

})();

Service

(function(){

  function Service() {

    //Our data object
    var data = {
      product: null
    };

    function set(value, field){
      data[field] = value;
    }

    return {
      set: set,
      value: data
    };


  }

  angular
    .module('app')
    .factory('Service', Service);

})();

HTML

  <body ng-app='app'>

    <div ng-controller='ctrl'>
      <h2>Service value : {{data.product}}</h2>
    </div>

    <div ng-controller='ctrl2'>
      <h2>Service value from controller2 : {{data2.product}}</h2>
    </div>

  </body>

So, we will share our data across multiple controller. By using services, you can avoid to use the $rootScope.

You can see the Working plunker

answered Sep 22, 2015 at 14:02

Paul Boutes

3,3152 gold badges21 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ajay Pal Singh Over a year ago

Well thanks Paul for the answer- really appreciate it!

user1261710 Over a year ago

Yes it works! And you don't even needs events or watchers! Awesome.

Collectives™ on Stack Overflow

Updating the scope variable across multiple controllers in angularjs

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related