How to access updated value in different page controllers?

Question

How to access updated value in different page controllers?

664 views Asked by s1lam8u At 11 September 2024 at 12:56

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

Original Q&A

There are 3 answers

ipln On 29 June 2015 at 09:51

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

Dmitri Algazin On 29 June 2015 at 10:24

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;

**Jan Peša** · Accepted Answer · 2015-06-29 10:10:40

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.

TechQA.

How to access updated value in different page controllers?

There are 3 answers

Related Questions in JAVASCRIPT

Related Questions in ANGULARJS

Related Questions in ANGULAR-BROADCAST

Related Questions in ANGULARJS-ROOTSCOPE

Popular Questions

Popular Tags

Trending Questions