Changing the $scope value in one controller based on the input from a

Question

Changing the $scope value in one controller based on the input from a

I'm facing an issue with updating my side menu items based on user data. I have a side menu controller where I need to display the username, and in another controller where I retrieve user data from the database and want to update the menu items accordingly. I've tried using $watch and services but haven't been successful. I'm open to suggestions that don't involve using $rootScope as I'm not familiar with it.

.controller('menuCtrl', function($scope) {
    $scope.username = ""
})
.controller('afterloginCtrl', function($scope) {
var a = "this is username"      
$scope.username = a // here I wish to update username in menuCtrl
    })

If you require more code or further details, please let me know.

EDIT

The challenge lies in updating user information stored in the database table. I need to fetch the latest username and other info from the database and reflect these changes in the menu controller every time the data is updated.

javascript angularjs cordova ionic-framework

Answer 1

Answer №1

If you need to share data between controllers, consider using a service for that purpose.
For instance:

.service('userData', () => ({info: {}, customMethod: () => {}}))
.controller('Controller1', (userData, $scope) => {$scope.user = userData.info;})
.controller('Controller2', (userData) => {userData.info.name = 'username';});

You can also enhance the service by adding relevant methods, and so on.

Subsequently, these methods can be utilized:

.controller('Controller2', (userData, apiService) => {
   apiService.fetchUser()
     .then(user => userData.setData(user));
});

Answer 2

If you need to share data between controllers, consider using a service for that purpose.
For instance:

.service('userData', () => ({info: {}, customMethod: () => {}}))
.controller('Controller1', (userData, $scope) => {$scope.user = userData.info;})
.controller('Controller2', (userData) => {userData.info.name = 'username';});

You can also enhance the service by adding relevant methods, and so on.

Subsequently, these methods can be utilized:

.controller('Controller2', (userData, apiService) => {
   apiService.fetchUser()
     .then(user => userData.setData(user));
});

Answer 3

Answer №2

.service('userAuthentication', () => ({}))

.controller('primaryController', (currentLoggedInUser, $scope) => {
  $scope.userData = userAuthentication;
})

.controller('secondaryController', (userAuthentication) => {
  userAuthentication.username = 'loggedInUsername';
})

Answer 4

.service('userAuthentication', () => ({}))

.controller('primaryController', (currentLoggedInUser, $scope) => {
  $scope.userData = userAuthentication;
})

.controller('secondaryController', (userAuthentication) => {
  userAuthentication.username = 'loggedInUsername';
})

Answer 5

Answer №3

When relying on services or factories, any data stored will be lost upon refreshing the page. However, a solution is to utilize browser session storage.

sessionStorage.setItem('NAME', "XYZ"); //store Data
sessionStorage.getItem('NAME'); // Retrieve Data

//Once you are done using the data, you can clear it from session storage.
sessionStorage.clear();

Answer 6

When relying on services or factories, any data stored will be lost upon refreshing the page. However, a solution is to utilize browser session storage.

sessionStorage.setItem('NAME', "XYZ"); //store Data
sessionStorage.getItem('NAME'); // Retrieve Data

//Once you are done using the data, you can clear it from session storage.
sessionStorage.clear();

Answer 7

Answer №4

Utilize the power of localStorage to store data locally.

In your primary controller, insert this snippet of code:

localStorage.setItem($scope.username);

Then, in the subsequent controller:

$scope.username = localStorage.getItem();

Answer 8

Utilize the power of localStorage to store data locally.

In your primary controller, insert this snippet of code:

localStorage.setItem($scope.username);

Then, in the subsequent controller:

$scope.username = localStorage.getItem();

Answer 9

Answer №5

According to the feedback provided above, it seems that your requirement is to ensure that the username persists even if the user closes the app and reopens it. However, using a service or factory may result in data loss once the app is reloaded or closed.

Solution :

You can utilize the localStorage to store the username and access the data across different controllers.

Sample Code :

You can create a shared factory service that will save and retrieve the stored local storage data based on the specified key.

app.factory('storageService', ['$rootScope', function($rootScope) {

    return {
        get: function(key) {
            return localStorage.getItem(key);
        },
        set: function(key, data) {
            localStorage.setItem(key, data);
        }
    };
}]);

In the controller :

To set and retrieve data from the local storage, inject the storageService dependency into the controller.

.controller('menuCtrl', ['$scope','storageService',function($scope,storageService) {
    // Retrieve local storage data using storageService
  storageService.get('username');
}])
.controller('afterloginCtrl',['$scope','storageService',function($scope,storageService) {
    var a = "this is username"      
    // Save local storage data using storageService
    storageService.set('username', a);
}])

Answer 10

According to the feedback provided above, it seems that your requirement is to ensure that the username persists even if the user closes the app and reopens it. However, using a service or factory may result in data loss once the app is reloaded or closed.

Solution :

You can utilize the localStorage to store the username and access the data across different controllers.

Sample Code :

You can create a shared factory service that will save and retrieve the stored local storage data based on the specified key.

app.factory('storageService', ['$rootScope', function($rootScope) {

    return {
        get: function(key) {
            return localStorage.getItem(key);
        },
        set: function(key, data) {
            localStorage.setItem(key, data);
        }
    };
}]);

In the controller :

To set and retrieve data from the local storage, inject the storageService dependency into the controller.

.controller('menuCtrl', ['$scope','storageService',function($scope,storageService) {
    // Retrieve local storage data using storageService
  storageService.get('username');
}])
.controller('afterloginCtrl',['$scope','storageService',function($scope,storageService) {
    var a = "this is username"      
    // Save local storage data using storageService
    storageService.set('username', a);
}])

Changing the $scope value in one controller based on the input from a

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

How can I store items in a JavaScript array so that they are accessible on a different page?

Error encountered when attempting to upload image on Twitter: missing media parameter

Trouble with innerHTML in a for loop when using getJSON

Displaying a pair of values using a single noUISlider

Dynamic binding in AngularJS with ng-repeat allows for seamless updating of data

Issue with ReactJS: onChange event does not function properly when value is changed using jQuery

Easily iterate through the <li> elements using jQuery and append them to the <datalist> dynamically

Oops! An error occurred while trying to load the myApp module. The module 'ui.bootstrap' is missing and causing the failure

Is there a way to make a try-catch block pause and wait for a response before moving

Removing data from the controller with JQUERY AJAX in a Spring MVC application

Error: The node is unable to parse JSON data through the API

Are elements loaded and hidden by ng-hide and ng-show, or does loading only occur with ng-show?

How to address additional attributes received from the server in Next.JS

Which is better: specifying Node.js version with nvmrc or in package.json engines

What is the best way to define a variable in EJS?

Issue with sending functions to other components in Angular

Troubleshooting a NextJS and ExpressJS error related to on-demand entry pinging

The jQuery dropdown selection for only displaying the month and year is not functioning properly when using the select

Node.js promises are often throwing Unhandled Promise Rejection errors, but it appears that they are being managed correctly

Express.js encountering an `ERR_HTTP_HEADERS_SENT` issue with a fresh Mongoose Schema