0

I have a problem with getting updated value between in different page controller, Here is the situation.

page1.html

<body ng-app="app">
<div  ng-controller="ctrl1">{{ version }}</div>
</body>

page2.html

<body ng-app="app">
<div  ng-controller="ctrl2">{{ version }}</div>
</body>

app.js

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

 app.run(function($rootScope) {
   $rootScope.Data = [];
   $rootScope.Data.Version = '1.0.0.1';
 });

  app.controller('ctrl1', function($scope, $rootScope){
   $scope.version = $rootScope.Data.Version;
   $rootScope.Data.Version = '1.0.0.2';
  });

 app.controller('ctrl2', function($scope, $rootScope){      
   $scope.version = $rootScope.Data.Version;
 });

Result

version: 1.0.0.1 // page1.html 
version: 1.0.0.1 // page2.html

Expected Result

version: 1.0.0.1 // page1.html 
version: 1.0.0.2 // page2.html

How to achieve this kind situation?

I tried using $broadcast from this tutorial for seprate page controllers: fiddle

s1lam8u
  • 111
  • 1
  • 3
  • 13
  • you jsfiddle doesnt seem to match with the code you've provided in question. I mean where's the `rootScope` in your fiddle ? – nalinc Jun 29 '15 at 09:58
  • I googled and got that jsfiddle tutorial using broadcast. For single page multiple controller is working. But I need for multiple page controllers. – s1lam8u Jun 29 '15 at 10:08
  • how are you rendering separate pages(views) ? ng-route or ui-router ? – nalinc Jun 29 '15 at 10:09
  • I'm not using anything. Basically, I'm redirecting between pages. – s1lam8u Jun 29 '15 at 10:12
  • Is `page1.html` and `page2.html` an indication that you're actually using two separate htmls files? If so, then what you're trying to do is not possible (unless you'll use some external storage/transport mechanism [url, localStorage, cookie, ...]). – Yoshi Jun 29 '15 at 10:13
  • @Yoshi, Thank you a lot. I know if a page reloads data I will loose But my situation, I have to redirect between pages. I tried the cookies it is working, But If I store the cookies variable in page1.html (ex: cookie_name = "value1") I'm able to access in page2.html, If I want to set another value into the same cookies variable (ex: cookie_name = "value2" ), after storing from page1.html i'm not able to access latest updated one. – s1lam8u Jun 29 '15 at 10:31
  • The whole point of angular is SPA. What you are doing is going away from that idea... – deostroll Jun 29 '15 at 11:31

3 Answers3

3

You can't just reload pages without losing all your data, you know that? Your $rootScope dies, everything dies... :) Your example is completely wrong. Either use SPA routing which doesn't force browser reload or use some type of local storage for keeping the data safe.

Also I have noticed that you are binding to primitives $scope.version = $rootScope.Data.Version; - don't do that, use $scope.data = $rootScope.Data; and then {{data.Version}}. Anyway you should not be using $rootScope at all.

Jan Peša
  • 6,760
  • 4
  • 27
  • 32
  • @smaji, Thank you a lot. I know if a page reloads data I will loose But my situation, I have to redirect between pages. I tried the cookies it is working, But If I store the cookies variable in page1.html (ex: cookie_name = "value1") I'm able to access in page2.html, If I want to set another value into the same cookies variable (ex: cookie_name = "value2" ), after storing from page1.html i'm not able to access latest updated one. – s1lam8u Jun 29 '15 at 10:29
  • I think, I have to use `ngStorage` for local storage. – s1lam8u Jun 29 '15 at 10:43
  • @Silambu Yes, in my projects I have used gsklee/ngStorage and auth0/angular-storage. For starters I recommend using the ngStorage. :) – Jan Peša Jun 29 '15 at 11:06
0

Pass the values between controller use broadcast and on method. please refer the link http://www.dotnet-tricks.com/Tutorial/angularjs/HM0L291214-Understanding-$emit,-$broadcast-and-$on-in-AngularJS.html

ipln
  • 113
  • 1
  • 2
  • 14
0

You know what I found after using Angular for 2 years now, that using direct variables like $scope.version is not the best for Angular, because they add different watches and in your case you are rewriting instance of 'version'.

Anyway, try to write like that everything what is getting synchronized between different controllers, services, directives, and so on.

    var state = {
        version: $rootScope.Data.Version,
        anyOtherVariable: value
    };
    $scope.state = state;
Dmitri Algazin
  • 3,332
  • 27
  • 30