CODEWITHSUNDEEP
javascriptangularjs
user1586243
user1586243

Reputation: 51

Data Binding between pages in Angularjs

I am trying to understand data binding in Angularjs.

What I want to do is establish binding between pages that is if I change the input on first.html, the data should automatically change in second.html.

For example, This is first.html:

<div ng-controller="MyCtrl">
  <input type="text" ng-model="value"/><br>

   {{value}}

<a href="#/second"><input type="submit" value="Second page"/></a>
</div>

and say second.html has only this piece of code {{value}}.

and in the .js file we have $routeProvider which takes the template url as 'second.html' & the controller is 'MyCtrl'.

So the controller is:

MyApp.controller(function($scope){

 $scope.value="somevalue";

 })

By doing the above way the {{value}} on the second.html is getting the value "somevalue". Which is comming from the controller.

But if I change the input value dynamically that is on the first.html, the value on the second.html is not getting that value.

My question is how do I bind the value on second.html with first.html automatically.

To understand the question clearly, Suppose there is an input field for entering text and a submit button on first.html, then I want to get the Input value of the text field of the first.html on the second.html page on Submit.

Upvotes: 1

Views: 8604

Answers (4)

nan-ead
nan-ead

Reputation: 500

You should user $broadcast, $emit or scope communication. Try to avoid overloading the rootScope. It is as a bad practice as saving data into the application sessions.

Upvotes: 0

user1586243
user1586243

Reputation: 51

Found the Solution to what I was looking for, The solution is in the Angular docs, here is the link http://docs.angularjs.org/cookbook/deeplinking.

Some part of the example on that link answers my question.

Upvotes: 0

Jason
Jason

Reputation: 564

If you attach your data to $rootScope if will survive transitions across controllers and be part of all $scopes (prototype inheritance magic)

//**attach in controller1:**
function MyCtrl1($rootScope) {
    $rootScope.recs= { rec1 : "think philosophically" };
}

//**do nothing in controller for view2:**
function MyCtrl2($scope) {
  //nothing
}

//**Markup for view2: automaticall makes use of data in $routeScope**
<p>Try doing this: {{recs.rec1 }}</p>

//**markup for view1 to respond to OPs question in comments**:
<input ng-model="recs.rec1" />

Update: Creating a custom service is a more scalable and structurally sound way to handle this, but the $rootScope method is the quick and dirty way.

Update2: added view1 markup to respond to OP question, edited example to take advantage of correct advice to use object rather than primitive.

Upvotes: 1

Mark Rajcok
Mark Rajcok

Reputation: 364677

Use a service and store your model there. Gloopy already has a good example of this here: https://stackoverflow.com/a/12009408/215945
Be sure to use an object property instead of a primitive type.

If you'd rather use $rootScope, then as above, define an object, rather than a primitive:

$rootScope.obj = { prop1: "somevalue" }`

then bind to that object property in your views: 

<input type="text" ng-model="obj.prop1">
{{obj.prop1}}

Upvotes: 3

Related Questions