Unable to retrieve Angular Service variable from Controller

Question

Unable to retrieve Angular Service variable from Controller

I am facing an issue with my Angular Service. I have set up two controllers and one service. The first controller fetches data through an AJAX call and stores it in the service. Then, the second controller tries to access this data from the service. While I have successfully passed the data from the first controller to the service, the data is not being retrieved when accessed from the second controller.

Just to clarify, I have one view that contains both controllers.

Thank you

Service

app.service('SharedDataService', function () {
  // Holds subtask that will be passed to other controllers
  // if SharedDataService is invoked.
  var _subTask = {};
  return {
    subTask : _subTask
  };
});

Controller 1

app.controller('MainCategoryController',function($scope,$http,SharedDataService){

    $scope.loadSubtask = function(m_uid){
        $http({
            method: 'POST',
            url: $locationProvider + 'query_stasks',
            data: {
                m_uid: m_uid
            }
        }).then(function successCallback(response) {
                SharedDataService.subTask = response.data;
            },function errorCallback(response){
        });

    }

}

Controller 2

app.controller('SubTaskController',function($scope,$http,$location,$rootScope,SharedDataService){



    $scope.$watch('SharedDataService.subTask', function(newValue,oldValue){
        console.log("ni sud');");
        if (newValue !== oldValue) {
            $scope.subTasks = newValue;
        }   
        return SharedDataService.subTask; 
    });

}

javascript angularjs angularjs-service

Answer 1

Answer №1

Due to SharedDataService not being part of the $scope, the first parameter in the $watch method must be a watchExpression function rather than an Angular expression string.

app.controller('SubTaskController',function($scope,$http,$location,$rootScope,SharedDataService){

    $scope.$watch(
        function watchExpression() {return SharedDataService.subTask},
        function listener (newValue,oldValue){
            console.log("ni sud");
            if (newValue !== oldValue) {
                $scope.subTasks = newValue;
            }
        }    
    });

});

For further details, visit AngularJS $rootScope.scope API Reference - $watch.

Answer 2

Due to SharedDataService not being part of the $scope, the first parameter in the $watch method must be a watchExpression function rather than an Angular expression string.

app.controller('SubTaskController',function($scope,$http,$location,$rootScope,SharedDataService){

    $scope.$watch(
        function watchExpression() {return SharedDataService.subTask},
        function listener (newValue,oldValue){
            console.log("ni sud");
            if (newValue !== oldValue) {
                $scope.subTasks = newValue;
            }
        }    
    });

});

For further details, visit AngularJS $rootScope.scope API Reference - $watch.

Answer 3

Answer №2

If you want to store values using an object in a service, consider implementing it like this in your project:

app.service('SharedDataService', function () {
  var service = {};
  service._subTask = '';
  service.toggleSubTask = function(value) {
    if (value){
        service._subTask = value;
    }
    return service._subTask;
  }
  return service;
});

Then, in your controller, utilize `service.toggleSubTask` to both set and retrieve the value. Give it a shot and best of luck!

Answer 4

If you want to store values using an object in a service, consider implementing it like this in your project:

app.service('SharedDataService', function () {
  var service = {};
  service._subTask = '';
  service.toggleSubTask = function(value) {
    if (value){
        service._subTask = value;
    }
    return service._subTask;
  }
  return service;
});

Then, in your controller, utilize `service.toggleSubTask` to both set and retrieve the value. Give it a shot and best of luck!

Answer 5

Answer №3

It is necessary to create a method for storing data in the service and then retrieving it from the service.

   app.factory('SharedDataService', function () {
   // Holds subtask that will be passed to other controllers
   // when SharedDataService is called.
  var _subTask = [];
   function setSubTask = function(data){
    _subTask = data;
   };
   return {
   subTask : _subTask,
   setSubTask:setSubTask
   };
});

Then, in the controller, make the following call:

SharedDataService.setSubTask(response.data);

This sets the data...

Answer 6

It is necessary to create a method for storing data in the service and then retrieving it from the service.

   app.factory('SharedDataService', function () {
   // Holds subtask that will be passed to other controllers
   // when SharedDataService is called.
  var _subTask = [];
   function setSubTask = function(data){
    _subTask = data;
   };
   return {
   subTask : _subTask,
   setSubTask:setSubTask
   };
});

Then, in the controller, make the following call:

SharedDataService.setSubTask(response.data);

This sets the data...

Answer 7

Answer №4

give it a try

    app.service('SharedDataService', function () {
   this._subTask = {};
});

 // do not change the code in the 1st controller
app.controller('MainCategoryController',function($scope,$http,SharedDataService){

$scope.loadSubtask = function(m_uid){
    $http({
        method: 'POST',
        url: $locationProvider + 'query_stasks',
        data: {
            m_uid: m_uid
        }
    }).then(function successCallback(response) {
            SharedDataService._subTask = response.data;
        },function errorCallback(response){
    });

}

}

// for the 2nd controller

app.controller('SubTaskController',function($scope,$http,$location,$rootScope,SharedDataService){

console.log(SharedDataService._subTask );
});

Answer 8

give it a try

    app.service('SharedDataService', function () {
   this._subTask = {};
});

 // do not change the code in the 1st controller
app.controller('MainCategoryController',function($scope,$http,SharedDataService){

$scope.loadSubtask = function(m_uid){
    $http({
        method: 'POST',
        url: $locationProvider + 'query_stasks',
        data: {
            m_uid: m_uid
        }
    }).then(function successCallback(response) {
            SharedDataService._subTask = response.data;
        },function errorCallback(response){
    });

}

}

// for the 2nd controller

app.controller('SubTaskController',function($scope,$http,$location,$rootScope,SharedDataService){

console.log(SharedDataService._subTask );
});

Answer 9

Answer №5

It's a best practice to create $http/resource calls within services rather than directly in controllers or directives. This approach promotes modularity and reduces the dependencies between different components.

The recommended way is to define a factory like this:

app.factory('SharedDataService', function ($http) {
         var subtasks = [];
         var saveSubtasks = function(sub){
           subtasks = sub;
           console.log(subtasks)
         }
         var tasks = {
          loadSubtasks : function(m_uid){
            $http({
                      method: 'POST',
                      url: $locationProvider + 'query_stasks',
                      data: {
                          m_uid: m_uid
                      }
                }).then(function(data){
                  saveSubtasks(data);
                });
          },
          getSubtasks : function(){
            return subtasks;
            }
          }
        return tasks;
    });

You can then use this factory in your controllers like so:

app.controller('SharedDataService',function($scope,SharedDataService){
  $scope.load = function(val){
    SharedDataService.loadSubtasks(val);
  }
});

app.controller('SubTaskController',function($scope,SharedDataService){
  $scope.get = function(){
    $scope.subtasks = SharedDataService.getSubtasks();
    console.log($scope.subtasks);

  }
});

Answer 10

It's a best practice to create $http/resource calls within services rather than directly in controllers or directives. This approach promotes modularity and reduces the dependencies between different components.

The recommended way is to define a factory like this:

app.factory('SharedDataService', function ($http) {
         var subtasks = [];
         var saveSubtasks = function(sub){
           subtasks = sub;
           console.log(subtasks)
         }
         var tasks = {
          loadSubtasks : function(m_uid){
            $http({
                      method: 'POST',
                      url: $locationProvider + 'query_stasks',
                      data: {
                          m_uid: m_uid
                      }
                }).then(function(data){
                  saveSubtasks(data);
                });
          },
          getSubtasks : function(){
            return subtasks;
            }
          }
        return tasks;
    });

You can then use this factory in your controllers like so:

app.controller('SharedDataService',function($scope,SharedDataService){
  $scope.load = function(val){
    SharedDataService.loadSubtasks(val);
  }
});

app.controller('SubTaskController',function($scope,SharedDataService){
  $scope.get = function(){
    $scope.subtasks = SharedDataService.getSubtasks();
    console.log($scope.subtasks);

  }
});

Unable to retrieve Angular Service variable from Controller

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

What is the average time frame for completing the construction of an electron project?

Transferring information from the router to the server file using Node.js and Express

Tips for displaying an asp.net form using javascript functions

How to Set Up Bower in WebStorm

Exclude the file and directory patterns from being watched with PM2: ignore folder

Creating a dynamic table accordion with PHP and MySQL

Symfony Form Validation through Ajax Request

Dividing the Controller and Service files from the app.js file

One of the quirks of Angularjs is that the ng-enter animation will only be

Is there a type-safe alternative to the setTimeout function that I can use?

What steps can be taken to avoid the duplication of color and stock values when including additional sizes?

Synchronize chat messages automatically with the scrolling window using AJAX technology

Converting Dynamo DB stream data into Json format

When attempting to navigate to a controller using Express.Router and Passport, encountering an undefined error with req.url.indexOf('?')

Having issues with closing a div tag using $.after() function

Show HTML form elements on the page using jQuery or JavaScript

"In a single line, add an item to an array based on a specified condition

"Time" for creating a date with just the year or the month and year

Require.js and R.js optimizer overlooks shimming configuration

An issue occurred in React 16.14.0 where the error "ReferenceError: exports is not defined" was not properly