Forgetting local variables after a routing redirect

Question

Forgetting local variables after a routing redirect

Struggling with my first CRUD Application using AngularJS.

I've successfully created PHP web services for CRUD operations.

The issue arises when trying to edit a specific user (object in ng-repeat).

The goal is to transfer the user data from page (listUsers.html) to another page (addUser.html) in order to display their properties in input fields.

Currently, I have only one controller and am utilizing routing.

For example:

In ListUsers.html, there is a button that triggers the update() function on click and redirects to AddUser.html:

app1.controller('testController',function($scope,$http){

    $scope.update=function(e){
        $scope.message="testeeee";
        $scope.newStudentt = e;
    };
});

How can I pass the value of $scope.message to AddUser.html?

javascript angularjs

Answer 1

Answer №1

Utilize a service to transfer data seamlessly:

Check out the PLUNKER

app.controller('ListCtrl', function($scope, UserService, $location) {
  // Retrieve user information from the server
  $scope.users = [
    {name: 'Jesse', email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1a707f69697f5a7f627b776dc775157d7774">[email protected]</a>'},
    {name: 'Walter', email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f68181b6938e979b869af080969495968496ff8082">[email protected]</a>'}
  ];

  $scope.update = function(user){
    UserService.setUser(user);
    $location.url('/user/edit');
  };
});

app.controller('EditUserCtrl', function($scope, UserService, $location) {
  $scope.user = UserService.getUser();

  $scope.save = function(){
    // Add saving functionality here
    alert('Saved');
  };

});

app.service('UserService', function(){
  var editingUser;
  this.setUser = function(user){
    editingUser = user;
  };

  this.getUser = function(){
    return editingUser;
  }
});

Answer 2

Utilize a service to transfer data seamlessly:

Check out the PLUNKER

app.controller('ListCtrl', function($scope, UserService, $location) {
  // Retrieve user information from the server
  $scope.users = [
    {name: 'Jesse', email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1a707f69697f5a7f627b776dc775157d7774">[email protected]</a>'},
    {name: 'Walter', email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f68181b6938e979b869af080969495968496ff8082">[email protected]</a>'}
  ];

  $scope.update = function(user){
    UserService.setUser(user);
    $location.url('/user/edit');
  };
});

app.controller('EditUserCtrl', function($scope, UserService, $location) {
  $scope.user = UserService.getUser();

  $scope.save = function(){
    // Add saving functionality here
    alert('Saved');
  };

});

app.service('UserService', function(){
  var editingUser;
  this.setUser = function(user){
    editingUser = user;
  };

  this.getUser = function(){
    return editingUser;
  }
});

Forgetting local variables after a routing redirect

Answer №1

Similar questions

Angular detects when a user scrolls on a webpage

Is it possible to develop an asynchronous function using Javascript?

Javascript: A Fun Game of Questions and Answers

What is the best method to adjust an element's height depending on the heights of two other elements?

Having problems with the For...In syntax in Javascript?

Error: The carousel in Bootstrap is throwing a TypeError because f[0] is not

Using HTML and JavaScript to verify email addresses

Click events failing to trigger within an HTML dropdown menu

Refreshing the browser causes AngularJS to disregard any cookies that have been set

customize Form Modal Bootstrap with AJAX Chained Dropdown for pre-selected options

What is the best way to add items to arrays with matching titles?

Does Highchart offer support for drilling down into sub-categories?

Unlock the lightbox and send the user to the parent page

jQuery Hide/Show Not Working as Expected

Using a conditional statement in JavaScript, create a mapping between the values in an array and string

Addressing an error of "call stack full" in nextjs

I'm trying to retrieve information from openweathermap in order to show it on my app, but I keep running into an error that says "Uncaught RangeError: Maximum

turn off event listener in vue

AngularJS Understanding the Scope in HTTP GET Requests

Creating fundamental forms using HTML, CSS, and Javascript