mark mark - 23 days ago 13
HTML Question

unable to carry form field data to next html page using angular js

Hello all i am trying to carry one of the field value from one html page to another using angular js. Below are the code snippets

HTML:

<body ng-app="myApp">

<div ng-controller="ExampleOneController">
Name:<input type = "text" ng-model="newVar.val">
</div>

<div ng-controller="ExampleTwoController">
<pre>value of name is {{anotherVar.val}}</pre>
</div>




AngularJS:

var myApp = angular.module("myApp", []);
myApp.controller("ExampleOneController", function($scope, NewsService) {
$scope.newVar = {
val: ""
};
NewsService.newVar = $scope.newVar;
$scope.news = NewsService.news;
});
myApp.controller("ExampleTwoController", function($scope, NewsService) {
$scope.anotherVar = NewsService.newVar;
$scope.news = NewsService.news;
});


It is working fine if i put the elements in same page but not if i put them in two different html pages

Where am i doing wrong.Please help me out

Thank You
Mark.

Answer

From what you have specified in your comments, it looks like you are navigating between actual pages instead of AngularJS pages.

When you do this, your browser basically drops everything and requests the new page from the server (extreme over-simplification but still valid). This means that it also drops the current state of your Angular app and recreates it on the new page.

In order to avoid this, you should start using Angular routing and keep everything needing Angular to a Single-Page Application (SPA).

I recommend using ui-router as I find it highly useable: https://github.com/angular-ui/ui-router

Comments