Is it possible to update the variable value in one controller from another controller after an http.get request has been made

Question

Is it possible to update the variable value in one controller from another controller after an http.get request has been made

I have encountered an issue with updating a variable from one controller to another using a service. Despite my efforts, the variable is not being updated.

The goal is to have the variable $scope.names in controller 'select' update in controller 'current' and display the updated information.

app.controller('select', ['$scope', '$http', 'myService', function($scope,$http, myService) {
$http.get('/myapp/stocknames'). 
success(function(data) {
    $scope.names=data;
    myService.names=data;
});
}]);

I am utilizing a service named myService to facilitate the exchange of data between the two controllers. The initialization of the names array within the service is done as follows:

app.service('myService', function($http, $rootScope) {
   this.names=[]
   });

app.controller('current', ['$scope', '$http', 'myService', function($scope,$http, myService) {
$scope.names=myService.names;
console.log($scope.names);  
}]);

I am seeking assistance on how to ensure that the current controller reflects the updated data once the $scope.names variable in the select controller has been updated.

Despite my best efforts, it seems like what I have implemented should work :-/

javascript angularjs

Answer 1

Answer №1

There are various methods to achieve this:

First: By monitoring the changes in the service variable data

var app = angular.module('plunker', []);

app.service('dataService', function() {
  this.serviceData = "test";
});

app.controller('MainCtrl', function($scope, dataService) {
  $scope.mainClickHandler = function(mainData) {
    dataService.serviceData = mainData;
  }
});


app.controller('SubCtrl', function($scope, dataService) {
  $scope.name = 'World';

  $scope.getServiceData = function() {
    return dataService.serviceData;
  }

  $scope.$watch("getServiceData()", function(newValue, oldValue) {
    if (oldValue != newValue) {
      $scope.name = newValue;
    }
  });
});

http://plnkr.co/edit/G1C81qvDD179NILMMxWb

Second:

Using event broadcast

var app = angular.module('plunker', []);

app.factory('dataService', function($rootScope) {
  var serviceData = {
    "mydata": "test"
  };

  $rootScope.$watch(function() {
    return serviceData.mydata;
  }, function(newValue, oldValue, scope) {
    $rootScope.$broadcast('dataService:keyChanged', newValue);
  }, true);

  return serviceData;

});

app.controller('MainCtrl', function($scope, dataService) {
  $scope.mainClickHandler = function(mainData) {
    dataService.mydata = mainData;
  }
});


app.controller('SubCtrl', function($scope, $rootScope, dataService) {
  $scope.name = 'World';

  $rootScope.$on('dataService:keyChanged', function currentCityChanged(event, value) {
    console.log('data changed', event, value);
    $scope.name = value;
  });

});

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

Third:

Using callback

var app = angular.module('plunker', []);

app.service('dataService', function() {
  var serviceData = "test";
  var callback = null;
  this.updateServiceData = function(newData){
    serviceData = newData;
    if(null!==callback)
    {
      callback();
    }
  };

  this.getServiceData = function(){
    return serviceData;
  };

  this.regCallback = function(dataCallback){
    callback = dataCallback;
  };
});

app.controller('MainCtrl', function($scope, dataService) {
  $scope.mainClickHandler = function(mainData) {
    dataService.updateServiceData(mainData);
  }
});


app.controller('SubCtrl', function($scope, dataService) {
  $scope.name = 'World';
  $scope.dataChangeCalback = function() {
    $scope.name = dataService.getServiceData();
  }
  dataService.regCallback($scope.dataChangeCalback);
});

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

Answer 2

There are various methods to achieve this:

First: By monitoring the changes in the service variable data

var app = angular.module('plunker', []);

app.service('dataService', function() {
  this.serviceData = "test";
});

app.controller('MainCtrl', function($scope, dataService) {
  $scope.mainClickHandler = function(mainData) {
    dataService.serviceData = mainData;
  }
});


app.controller('SubCtrl', function($scope, dataService) {
  $scope.name = 'World';

  $scope.getServiceData = function() {
    return dataService.serviceData;
  }

  $scope.$watch("getServiceData()", function(newValue, oldValue) {
    if (oldValue != newValue) {
      $scope.name = newValue;
    }
  });
});

http://plnkr.co/edit/G1C81qvDD179NILMMxWb

Second:

Using event broadcast

var app = angular.module('plunker', []);

app.factory('dataService', function($rootScope) {
  var serviceData = {
    "mydata": "test"
  };

  $rootScope.$watch(function() {
    return serviceData.mydata;
  }, function(newValue, oldValue, scope) {
    $rootScope.$broadcast('dataService:keyChanged', newValue);
  }, true);

  return serviceData;

});

app.controller('MainCtrl', function($scope, dataService) {
  $scope.mainClickHandler = function(mainData) {
    dataService.mydata = mainData;
  }
});


app.controller('SubCtrl', function($scope, $rootScope, dataService) {
  $scope.name = 'World';

  $rootScope.$on('dataService:keyChanged', function currentCityChanged(event, value) {
    console.log('data changed', event, value);
    $scope.name = value;
  });

});

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

Third:

Using callback

var app = angular.module('plunker', []);

app.service('dataService', function() {
  var serviceData = "test";
  var callback = null;
  this.updateServiceData = function(newData){
    serviceData = newData;
    if(null!==callback)
    {
      callback();
    }
  };

  this.getServiceData = function(){
    return serviceData;
  };

  this.regCallback = function(dataCallback){
    callback = dataCallback;
  };
});

app.controller('MainCtrl', function($scope, dataService) {
  $scope.mainClickHandler = function(mainData) {
    dataService.updateServiceData(mainData);
  }
});


app.controller('SubCtrl', function($scope, dataService) {
  $scope.name = 'World';
  $scope.dataChangeCalback = function() {
    $scope.name = dataService.getServiceData();
  }
  dataService.regCallback($scope.dataChangeCalback);
});

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

Answer 3

Answer №2

To achieve this, one approach is to bind the entire service to the scope:

myApp.controller('select', ['$scope', '$http', 'myService', function($scope,$http, myService) {
          $scope.myService = myService;
          $scope.click = function () {
              myService.names = "john";
        };

Subsequently, we can directly modify myService.names within the controller.

The current controller should be structured as follows:

myApp.controller('current', ['$scope', '$http', 'myService', function($scope,$http, myService) {
$scope.names=myService.names;
console.log($scope.names);  

          $scope.$watch(function() { return myService.names; }, function(newVal, oldVal) {
   $scope.names = newVal;
   });
 }]);
}]);

We then utilize a watcher expression.

Alternatively, a watcherExpression can also be used. Refer to for more detailed information.

Answer 4

To achieve this, one approach is to bind the entire service to the scope:

myApp.controller('select', ['$scope', '$http', 'myService', function($scope,$http, myService) {
          $scope.myService = myService;
          $scope.click = function () {
              myService.names = "john";
        };

Subsequently, we can directly modify myService.names within the controller.

The current controller should be structured as follows:

myApp.controller('current', ['$scope', '$http', 'myService', function($scope,$http, myService) {
$scope.names=myService.names;
console.log($scope.names);  

          $scope.$watch(function() { return myService.names; }, function(newVal, oldVal) {
   $scope.names = newVal;
   });
 }]);
}]);

We then utilize a watcher expression.

Alternatively, a watcherExpression can also be used. Refer to for more detailed information.

Is it possible to update the variable value in one controller from another controller after an http.get request has been made

Answer №1

Answer №2

Similar questions

By implementing setInterval, but I aim to deactivate it upon detecting user input

Using React to pass a value through state when handling changes

What is the best way to retrieve the total number of nested objects within an object?

Creating dynamic pagination in React using a variable length loop

Using jQuery to create a seamless scrolling experience to both the top of a page and to

Uncover the structure of a regular expression pattern to discover the quantity of tokens and the size of the anticipated matches

Initiate an animation in Wordpress once the entire page has finished loading

Having issues with 'direction' in React withStyles causing errors

Developing a Monitoring-Frontend Application with backbone.js

Set a value after checking with ng-if

Exploring the syntax of Vue's data function

Leverage the power of PHP files within your JavaScript code

Initiate node and PM2 application using a batch file

Converting a boolean value to a boolean type in a CSHTML file

Firebase (web) deploy encounters an issue due to stripe integration

Utilize Node.js and an API to generate a new problem in GitHub, but encountering an issue where the response

The unzipper will disregard any empty directories within the file

Implement lazy loading of content on scroll in Grails framework

Is it possible to extract data from a table by adjusting Javascript in the inspector tool? The page is only showing today's data, but I'm interested in retrieving historical data by going back

What is the best way to fulfill a promise after a CSV file has finished being read?