CODEWITHSUNDEEP
angularjscontrollerapply
Robert van der Spek
Robert van der Spek

Reputation: 1227

Variable not updated after change in different controller

I have the following code:

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

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <div>

      <div ng-controller="Ctrl1">Ctrl1.option = {{option}}</div>

      <div ng-controller="Ctrl2">Crtl2.thisOtpion = {{thisOption}}</div>

    </div>

    <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js" ng:autobind></script>
    <script>
      angular.module("App", []).controller("Ctrl1", function($scope) {
        $scope.option = 1;
      });

      angular.module("App").controller("Ctrl2",  ["$scope", "$controller",
        function($scope, $controller) {

              $scope.thisOption;

                var Ctrl1Proxy = $scope.$new();
            $controller("Ctrl1", {$scope : Ctrl1Proxy});
            Ctrl1Proxy.option = 0;
            $scope.thisOption = Ctrl1Proxy.option;



        }
      ]);

    </script>
  </body>

</html>

The result is: 1

Why isn't the variable option updated to 0? And what should I do to obtain this result? I already tried using $apply also in combination with $timeout. But without any success.

Thanks!

Upvotes: 1

Views: 281

Answers (2)

rejo
rejo

Reputation: 3350

Try this , If multiple controller you have to use $rootScope to share data OR Use $broadcast

, if its nested Controller.Use $scope.$parent.option = 0 instead of var Ctrl1Proxy = $scope.$new();

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

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <div>

      <div ng-controller="Ctrl1">Ctrl1.option = {{option}}</div>

      <div ng-controller="Ctrl2">Crtl2.thisOtpion = {{thisOption}}</div>

    </div>

    <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js" ng:autobind></script>
    <script>
      angular.module("App", []).controller("Ctrl1", function($rootScope) {
        $rootScope.option = 1;
      });

      angular.module("App").controller("Ctrl2",  ["$scope", "$controller","$rootScope",
        function($scope, $controller,$rootScope) {

              $scope.thisOption;

                var Ctrl1Proxy = $scope.$new();
            Ctrl1Proxy=$controller("Ctrl1", {$scope : Ctrl1Proxy});
            Ctrl1Proxy.option = 0;
            $scope.thisOption = Ctrl1Proxy.option;
            $rootScope.option = 0;
          
        }
      ]);

    </script>
  </body>

</html>

Upvotes: 2

Alvaro Silvino
Alvaro Silvino

Reputation: 9753

In this case you should use $rootScope

html

 <div ng-controller="Ctrl1">

      <div ng-controller="Ctrl2">{{option}}</div>

    </div>

JavaScript

angular.module("App", []).controller("Ctrl1", function($rootScope) {
        $rootScope.option = 1;
      });

      angular.module("App").controller("Ctrl2",  ["$scope", "$location", "$controller", "$timeout","$rootScope",
        function($scope, $location, $controller, $timeout,$rootScope) {
            // Forward if user is not a manager



                   $rootScope.option = 0;



        }
      ]);

reference

Upvotes: 1

Related Questions