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 best way to customize the appearance of Image tags located inside SVGs, whether they are in separate files or embedded within the code

Get an MP4 on your iPhone (iOS) by downloading it from a link on a webpage

The filter functionality is not functioning properly in AngularJS

Is there a way to use JavaScript to alter the existing URL?

Can you explain the distinction between Array() and [] in Javascript, and when would it be preferable to use one over the other?

Tips for storing data in local storage for multiple users using AngularJS 1

Eliminating an element from an array without the need for iteration

What is the process for extracting the time value from a jQuery timepicker?

JavaScript Class Reference Error

Traversing an array of objects using D3.js

Content moves as you scroll, not within a lightbox

Encountering the error message "This expression cannot be invoked" within a Typescript React Application

Using Jquery and the cookie.split method to extract and eliminate a value from a cookie

"Is it possible to selectively load only a few images on a website that contains numerous

Retrieve information from a JSON file and dynamically showcase it within a REACT component

Receiving no communication from Express Router

Insufficient module names remaining in NPM

How can you efficiently pass multiple JSON files as arguments for Observable Arrays, especially when the values from one file are required for use in another file?

Having trouble with the functionality of a simple jQuery toggle menu on mobile?

Select2.js Dropdown List with Case Sensitivity