Transferring values from one page to another with Angularjs

Asked

Viewed 683 times

3

Good afternoon, I was wondering if there was a way to pass the data from one page to the other... I made a small function that when you press the button it changes the name, only it appears on one page already in the other it does not receive change or it does not appear, even though I press F5 to refresh the page.

I called the script in both, and only on a page that contains a button to change the phrase... I will post the code below to better understand. In my conception of logic, I believe that I must create an empty variable and what is written in the input it is stored by clicking the button, and in the second html page when I update it will appear the filled variable... I put a function below but it is still not working...

script test.js - 

   var app = angular.module('AngularADM', []);

var te = " ";

app.controller('TempoHorasP1', function($scope, $rootScope){
  $rootScope.teste = "Escreva acima"; 

  $scope.atualizar = function (){
    $rootScope.teste = te;
  }
});

app.controller('TempoHorasP2', function($scope, $rootScope){
  $scope.teste = te;
});

page one - 

<!DOCTYPE html>
<html lang="pt-br" ng-app="AngularADM">

<head>
    <meta charset="utf-8">
    <meta name="description" content="Studio 7 Hair é um salão de beleza">
    <meta name="author" content="Miyomic">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Sttudio 7 Hair</title>



    <link rel="stylesheet" type="text/css" href="css/visual.css">

    <!-- responsivo -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/bootstrap-theme.css" rel="stylesheet">
    <link href="css/bootstrap-theme.css.map" rel="stylesheet">
    <link href="css/bootstrap-theme.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <script src="js/jqueryAtualizado.js"></script>
    <script src="js/jqueryAtualizado.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="js/bootstrap.min.js"></script>
    <!-- Fim responsivo -->

    <script src="js/digitar-home.js"></script>
    <script src="js/angular.min.js"></script>
    <script src="js/teste.js"></script>
</head>

<body ng-controller="TempoHorasP1">

    <div class="container">

        <div class="row texto-centro margin-top20">
            <button ng-click="atualizar()">Atualizar</button>

        </div>


    <input ng-model="teste" />

    <h1>{{teste}}</h1>

    </div>

</body>

</html>

Page two - 

<!DOCTYPE html>
<html lang="pt-br" ng-app="AngularADM">

<head>
    <meta charset="utf-8">
    <meta name="description" content="Studio 7 Hair é um salão de beleza">
    <meta name="author" content="Miyomic">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Sttudio 7 Hair</title>


    <link rel="stylesheet" type="text/css" href="css/visual.css">

    <!-- responsivo -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/bootstrap-theme.css" rel="stylesheet">
    <link href="css/bootstrap-theme.css.map" rel="stylesheet">
    <link href="css/bootstrap-theme.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <script src="js/jqueryAtualizado.js"></script>
    <script src="js/jqueryAtualizado.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="js/bootstrap.min.js"></script>
    <!-- Fim responsivo -->

    <script src="js/angular.min.js"></script>
    <script src="js/teste.js"></script>
    <script src="js/digitar-home.js"></script>
    <script src="js/subir.js"></script>
</head>

<body>

        <div ng-controller="TempoHorasP2">
        <p>{{teste}}</p>
        </div>


</body>

</html>

The first page already has a fixed phrase that is changed when something is written in the input... the idea is: I write in the input, click on the button it saves the phrase and another page when I update appears the phrase I recorded.

Thank you....

javascript angularjs html5

2 answers

0

  • I believe I have to store the values in the variable and in the second controller I can call them... the problem and how I do it know....

  • I changed the question please take a look...

-1

Hello,

you can use $rootScope, but from what I’ve seen, the two pages use the same controller and this will cause the screen transition to reboot the value of the test variable with the pattern "write here".

I suggest using two different controllers. It would look more or less like this:

app.controller('TempoHorasP1', function($scope, $rootScope){
  $rootScope.teste = "escreva aqui"; 

  $scope.atualizar = function (){
    $rootScope.teste = "oi dnv 1";
  }
});

app.controller('TempoHorasP2', function($scope, $rootScope){
  $scope.teste = $rootScope.teste;
  $scope.atualizar = function (){
    $rootScope.teste = "oi dnv 2";
  }
});

  • The use of $rootScope for storing variables and functions is not recommended, as it basically serves as a global variable scope. (ref. http://stackoverflow.com/questions/32761540/why-using-rootscope-with-functions-is-not-recommended)

  • It’s that thing, enjoy in moderation.

  • Your method worked not friend... although I’m locally not sure if it causes any effect...

  • I changed the question, please take a look...

Browser other questions tagged javascript angularjs html5

You are not signed in. Login or sign up in order to post.