Change of value isn´t persistent between controllers

Question

I´m trying to store some kind of global variable in my application. I read that it´s best practice to use a value instead of a service or a rootscope.
So I created this code snippet to test the behavior of the value. It seems that the value changes indside of the controller but if I use the value in another controller, the change seems to be lost. Is there a way to change the value during runtime and why is the change not persistant ?

Here is my code on jsfiddle

Javascript

var myApp = angular.module('myApp',[]);

myApp.value("basePath", "");

myApp.controller('TestController', function($scope, basePath) {

    $scope.preEdit = basePath;

  basePath = window.location.href;
  $scope.postEdit = basePath;

});

myApp.controller('SampleController', function($scope, basePath) {
    $scope.transferedValue = basePath;
})

HTML:

<div ng-controller="TestController">
 Before Editing: {{preEdit}}<br>
 After Editing: {{postEdit}}<br>
</div>

<div ng-controller="SampleController">
  In another Controller: {{transferedValue}}
</div>

score 4 · Accepted Answer · edited May 23 '17 at 11:44

4

You'll find an answer in this entry: Global variables in AngularJS

Define the value as an Object

myApp.value("basePath", {value: ""});

After that you can change basePath.value in your controllers.

myApp.controller('TestController', function($scope, basePath) {

    $scope.preEdit = basePath.value;

  basePath.value = window.location.href;
  $scope.postEdit = basePath.value;

});

edited May 23 '17 at 11:44

Community

1
1

answered Jul 04 '16 at 13:32

Benjamin Schüller

2,104
1
17
29

Is it also possible to use this value in a service instead of a controller? – JohnDizzle Jul 04 '16 at 13:34
Yes, you can use and change the value also in services. – Benjamin Schüller Jul 04 '16 at 13:39

score 1 · Answer 2 · answered Jul 04 '16 at 13:34

1

use a constant,

myApp.constant( 'basePath', '' );

this will allow you to inject the value into modules.

answered Jul 04 '16 at 13:34

fayzaan

265
3
9

score 0 · Answer 3 · answered Jul 04 '16 at 13:51

Here's is a snippet working:

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

app.controller('TestController', function($scope, $rootScope) {
  $rootScope.postEdit = window.location.href;
});

app.controller('SampleController', function($scope, $rootScope) {
  $scope.transferedValue = $rootScope.postEdit;
});

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>
<body>
  <div ng-controller="TestController" ng-bind="postEdit"></div>
  <div ng-controller="SampleController" ng-bind="transferedValue"></div>
  </div>
</body>
</html>

score -1 · Answer 4 · answered Jul 04 '16 at 13:27

-1

hai JohnDizzle ,

   You Can Pass the Data from One Controller to Anthor Controller Using BroadCast . And You can Store The LocalStorage And Retrive In Anthor Controll ALSO .. If Have Any Doughts Ask me.

answered Jul 04 '16 at 13:27

Naveen Kumar

50
1
8

1

It should be a comment, since you have no enough reputation to comment, you should post a real answer. – developer033 Jul 04 '16 at 13:32

Change of value isn´t persistent between controllers

4 Answers4