Angularjs rootScope injection doesn't propogate as expected

Question

I am trying to change the value of a $rootScope variable and let that variable be accessible to various controllers with the updated value. However, for some reason the changed value in $rootScope seems to go undetected by any controller accessing it via $rootScope.

In this example, why doesn't "child" reflect the changed value?

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <script data-require="[email protected]" src="http://code.angularjs.org/1.2.15/angular.js" data-semver="1.2.15"></script>
  <script type="text/javascript">
    angular.module('myApp', [])
      .run(function($rootScope) {
        $rootScope.current = 'a';
      })
      .controller('ParentCtrl', ['$scope', '$rootScope',
        function($scope, $rootScope) {
          $scope.child = $rootScope.current;
        }
      ])
  </script>
</head>

<body ng-app="myApp">
  <div>
    <p>Value of "current": {{ current }}</p>
    <button ng-click="$root.current = 'b'">Change value to 'b'</button>
    <div ng-controller="ParentCtrl">
      Value of "current" (within ParentCtrl): {{ current }}
      <br>Value of "child" (via ParentCtrl injection of rootscope): {{ child }}
    </div>
  </div>
</body>

</html>

Here is my plunker. Thanks in advance!

Because your ng-click did not update the child variable. Your child variable got initialized but never got updated. — TechCrunch
– TechCrunch, Commented Mar 24, 2015 at 20:07
@TechCrunch I'm not interested in changing the child variable specifically, though...I'm interested in the child value auto-updating to reflect the "current" variable it was pointing to. Is there another mechanism that is designed to observe changes to $rootScope? — hexparrot
– hexparrot, Commented Mar 24, 2015 at 20:09

TechCrunch · Accepted Answer · 2015-03-24 20:26:04Z

2

You must watch for rootScope variable as below.

 $scope.$watch(function() {
            return $rootScope.current;
          }, function() {
              $scope.child = $rootScope.current;
            }, 
          true);

Here is the working plunker. You can read more about $watch here

edited Mar 24, 2015 at 20:26

answered Mar 24, 2015 at 20:16

TechCrunch

3,1827 gold badges48 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

hexparrot Over a year ago

Thanks; this is precisely what I needed!

user3281440 · Accepted Answer · 2015-03-24 20:15:59Z

This way should work, check Angularjs scope doc for better understanding

https://docs.angularjs.org/guide/scope

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script>
  document.write('<base href="' + document.location + '" />');
</script>
<script data-require="[email protected]" src="http://code.angularjs.org/1.2.15/angular.js" data-semver="1.2.15"></script>
<script type="text/javascript">
angular.module('myApp', [])
  .run(function($rootScope) {
    $rootScope.current = 'a';
  })
  .controller('ParentCtrl', ['$scope', '$rootScope',
    function($scope, $rootScope) {
      $scope.root = $rootScope;
    }
  ])
 </script>
 </head>

<body ng-app="myApp">
  <div>
  <p>Value of "current": {{ current }}</p>
  <button ng-click="$root.current = 'b'">Change value to 'b'</button>
  <div ng-controller="ParentCtrl">
  Value of "current" (within ParentCtrl): {{ current }}
  <br>Value of "child" (via ParentCtrl injection of rootscope): {{ root.current }}
  </div>
 </div>
  </body>
 </html>

Collectives™ on Stack Overflow

Angularjs rootScope injection doesn't propogate as expected

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related