AngularJS service for exchanging information among controllers

Question

AngularJS service for exchanging information among controllers

I am working on an AngularJS application (1.4.10) where I need to share data between two controllers.

To achieve this, I created a factory:

.factory('CardsForService', function($http, URL){
    var service = {
        "block_id": '',
        "service_id": ''
    };

    service.save_data = function(block_id, service_id){
        service.block_id = block_id;
        service.service_id = service_id;
    };

    service.get_data = function(){
        return service;
    };

    return service;
})

I set the data in the first controller:

$scope.open = function(id, type){
    console.log(id +" "+type);
    CardsForService.save_data(id, type);
    ...

And when attempting to retrieve the data in another controller, it seems to return empty:

$scope.$on('$routeChangeSuccess', function() {
    if  (algo_to_used == "service"){
        var data = CardsForService.get_data();
        console.log(data);
    } else {
    }
});

The output of console.log shows:

Object {block_id: "", service_id: ""}

However, when I use the get_data() function in the same controller as save_data(), it works fine. What could be causing this issue?

javascript angularjs controller

Answer 1

Answer №1

Revamp the Factory Here

app.factory('CardsForService', function(){
var service = {
    "block_id": '',
    "service_id": ''
};

var updateData = function(block_id, service_id){
    service.block_id = block_id;
    service.service_id = service_id;
};

var retrieveData = function(){
    return service;
};

return{
   updateData:updateData,
   retrieveData:retrieveData
}});

Now in the controllers

app.controller('FirstCtrl',function(CardsForService){
    CardsForService.updateData(id, type);
});

app.controller('SecondCtrl', function($scope, CardsForService){
    $scope.data = CardsForService.retrieveData();
});

Answer 2

Revamp the Factory Here

app.factory('CardsForService', function(){
var service = {
    "block_id": '',
    "service_id": ''
};

var updateData = function(block_id, service_id){
    service.block_id = block_id;
    service.service_id = service_id;
};

var retrieveData = function(){
    return service;
};

return{
   updateData:updateData,
   retrieveData:retrieveData
}});

Now in the controllers

app.controller('FirstCtrl',function(CardsForService){
    CardsForService.updateData(id, type);
});

app.controller('SecondCtrl', function($scope, CardsForService){
    $scope.data = CardsForService.retrieveData();
});

Answer 3

Answer №2

It seems like there might be a timing issue at play here. The data obtained from a service similar to this one may not update in real time. Below is a snippet that offers a visualization to help illustrate this.

var app = angular.module("demo", []);

app.factory("MySvc", function() {
  var data = {};
  data.setData = function(key, value) {
    this[key] = value;
  }
  data.getData = function(key, def) {
    return key in this ? this[key] : def;
  };
  return data;
});

app.controller("test1", ["$scope", "MySvc", "$timeout",
  function($scope, MySvc, $timeout) {
    $timeout(100).then(function() {
      MySvc.setData("foo", "bar");
      $scope.data = MySvc.getData("foo");
    });
  }
]);

app.controller("test2", ["$scope", "MySvc", "$timeout",
  function($scope, MySvc, $timeout) {
    $timeout(500).then(function() {
      $scope.data = MySvc.getData("foo", "baz");
    });
  }
]);

app.controller("test3", ["$scope", "MySvc",
  function($scope, MySvc) {
    $scope.data = MySvc.getData("foo", "asdf");
  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js "></script>

<div ng-app="demo">
  <pre ng-controller="test1">Test 1: {{ data }}</pre>
  <pre ng-controller="test2">Test 2: {{ data }}</pre>
  <pre ng-controller="test3">Test 3: {{ data }}</pre>
</div>

Answer 4

It seems like there might be a timing issue at play here. The data obtained from a service similar to this one may not update in real time. Below is a snippet that offers a visualization to help illustrate this.

var app = angular.module("demo", []);

app.factory("MySvc", function() {
  var data = {};
  data.setData = function(key, value) {
    this[key] = value;
  }
  data.getData = function(key, def) {
    return key in this ? this[key] : def;
  };
  return data;
});

app.controller("test1", ["$scope", "MySvc", "$timeout",
  function($scope, MySvc, $timeout) {
    $timeout(100).then(function() {
      MySvc.setData("foo", "bar");
      $scope.data = MySvc.getData("foo");
    });
  }
]);

app.controller("test2", ["$scope", "MySvc", "$timeout",
  function($scope, MySvc, $timeout) {
    $timeout(500).then(function() {
      $scope.data = MySvc.getData("foo", "baz");
    });
  }
]);

app.controller("test3", ["$scope", "MySvc",
  function($scope, MySvc) {
    $scope.data = MySvc.getData("foo", "asdf");
  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js "></script>

<div ng-app="demo">
  <pre ng-controller="test1">Test 1: {{ data }}</pre>
  <pre ng-controller="test2">Test 2: {{ data }}</pre>
  <pre ng-controller="test3">Test 3: {{ data }}</pre>
</div>

Answer 5

Answer №3

After tackling the issue head-on, I managed to solve it. Initially, I was using the following code snippet for redirecting to the new page:

$window.location.assign('/cards/service');

However, I decided to switch to this alternative code:

$location.path('/cards/service');

And voilà, it's now functioning as intended.

An interesting observation is that previously, when the redirection wasn't working, the console in the Chrome inspector would refresh with each reload. Now, with the new code, the console remains stable. Could anyone enlighten me on the distinctions between these two functions?

Answer 6

After tackling the issue head-on, I managed to solve it. Initially, I was using the following code snippet for redirecting to the new page:

$window.location.assign('/cards/service');

However, I decided to switch to this alternative code:

$location.path('/cards/service');

And voilà, it's now functioning as intended.

An interesting observation is that previously, when the redirection wasn't working, the console in the Chrome inspector would refresh with each reload. Now, with the new code, the console remains stable. Could anyone enlighten me on the distinctions between these two functions?

AngularJS service for exchanging information among controllers

Answer №1

Answer №2

Answer №3

Similar questions

What is the most strategic way to conceal this overlay element?

How to deactivate a text box within a form that is dynamically generated using Angular

Is there a way for me to display the image name at the bottom before uploading it, and have a new div created every time I upload an image?

Selection of Dropdown results in PDF not loading

What is the reason behind the non-exportation of actions in Redux Toolkit for ReactJS?

access the passport variable within the ng-view

What is the best way to store selected items from a multi-select box in AngularJS that is generated using ng-repeat?

What method can I use to modify the object's keys based on certain conditions in ES6/React?

vuejs mounted: Unable to assign a value to an undefined variable

Is it possible to pass a variable to a text constant in Angular?

Are Yarn, Lerna, and Angular Libs causing issues with publishing?

Retrieving information from PHP using AJAX

Retrieving data from Node.js within an Angular application

Is there a way to activate a function in a sibling component without using Prop Drilling?

The impressive Mean.io framework integrated with the powerful socket.io technology

How can I ensure that each callback is passed a distinct UUID?

Is it feasible to capture a screenshot of a URL by using html2canvas?

Unable to retrieve /ID from querystring using Express and nodeJS

The functionality to disable and reenable a button after performing a calculation is not functioning properly in the code

Designing a dropdown menu within displaytag