Transferring values from one page to another with angularjs [duplicate]

Question

Transferring values from one page to another with angularjs [duplicate]

Navigation

#1 by (0 votes)
#2 by (-1 votes)

2

Good afternoon, I wanted to know if I would be able to pass the data from one page to another ... I did a small function that when I press the button it changes the name, only that it appears on one page in the other it does not receive change or does not appear, even though I pressed 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 understand better. In my conception of logic, I think I should create an empty variable and whatever is written in the input it is stored by clicking on the button, and on the second html page when I refresh it will populate the filled variable ... I put a function below but even so it's 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><scriptsrc="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><scriptsrc="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, I click on the button it saves the sentence and on another page when I update the sentence I recorded .

Thank you ....

javascript angularjs html5

asked by anonymous 20.12.2016 / 22:17

2 answers

Share Link with Facebook Image Filter records by month and year in Laravel

score 0 · Answer 1

Dude you can use the route, unless you have a very specific need to change the page and reload everything, again

Take a look at the example below:

link

With this you would not need to be transient your variables: D

score -1 · Answer 2

Hello,

You can use $ rootScope, but from what I saw, the two pages use the same controller and this will cause the screen transition to reset the value of the test variable with the "write here" pattern.

I suggest you use two different controllers. It would look something 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";
  }
});