1

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.

user1586243
  • 51
  • 2
  • 7

4 Answers4

3

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}}
Community
  • 1
  • 1
Mark Rajcok
  • 362,217
  • 114
  • 495
  • 492
  • Let me explain clearly about what I am looking for, 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. So whenever the input on first.html changes the value in second.html should get that value. – user1586243 Feb 28 '13 at 20:51
  • What I described will work, unless by "submit" you mean that you are not using Angular routing and the browser gets new page from the web server. In that case, Angular can't help you with that, because you are reloading Angular on second.html. – Mark Rajcok Feb 28 '13 at 20:58
  • By "submit" I mean by using Angular's $rootProvider going to the next page, so for example **$routeProvider.when('/second', { templateUrl:"second.html", controller: "MyCtrl" }) ** and assigning the "/second" to ** **. – user1586243 Feb 28 '13 at 21:14
  • Found the solution to what I was looking for, Anyways thanks for your help. – user1586243 Mar 02 '13 at 02:36
1

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.

Jason
  • 564
  • 6
  • 12
  • If we have to enter the values dynamically (say from an input on the first view), this does not work (I mean the binding on second view). What to do for achieving this. – user1586243 Feb 27 '13 at 22:59
  • 1
    See update above. Your two way binding isn't working because of primitive. if you *needed* to just have string for some reason you can use an event listener and reset the scope object onEvent, but the object wrapper is almost certainly better. – Jason Feb 28 '13 at 03:57
  • Let me explain clearly about what I am looking for, 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. – user1586243 Feb 28 '13 at 20:45
  • The above code will do that without a submit button, if you want it to work only on form submit, review here: http://docs.angularjs.org/guide/forms – Jason Mar 01 '13 at 01:49
  • Found the solution to what I was looking for, Anyways thanks for your help. – user1586243 Mar 02 '13 at 02:37
0

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.

user1586243
  • 51
  • 2
  • 7
0

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.

nan-ead
  • 482
  • 5
  • 5