2015-03-24 4 views
0

Я пытаюсь изменить значение переменной $ rootScope и позволить этой переменной быть доступной для разных контроллеров с обновленным значением. Однако по какой-либо причине измененное значение в $ rootScope, по-видимому, остается незамеченным любым контроллером, получающим его через $ rootScope.Angularjs rootScope injection не распространяется, как ожидалось

В этом примере, почему «ребенок» не отражает измененное значение?

<!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> 

Это мой plunker. Заранее спасибо!

+0

Поскольку ваш ng-click не обновил дочернюю переменную. Ваша дочерняя переменная получила инициализацию, но никогда не обновлялась. – TechCrunch

+0

@TechCrunch Я не заинтересован в изменении дочерней переменной, особенно ... Меня интересует автоматическое обновление дочернего значения, чтобы отразить текущую переменную, на которую она указывала. Есть ли другой механизм, который предназначен для наблюдения за изменениями в $ rootScope? – hexparrot

+1

да, вы должны использовать $ watch или $ watchCollection – TechCrunch

ответ

2

Вы должны следить за переменной rootScope, как показано ниже.

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

Работает plunker. Вы можете узнать больше о $ watch here

+0

Thanks; это именно то, что мне нужно! – hexparrot

0

Этот способ должен работать, проверить Angularjs области видимости документ для лучшего понимания

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>