在不同的控制器中更改后变量未更新

Question

我有以下代码：

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

结果是：1

为什么变量选项没有更新为0？我应该怎么做才能得到这个结果？我已经尝试将 $apply 与 $timeout 结合使用。但是没有成功。

谢谢！

Answer 1

在这种情况下，您应该使用 $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

Answer 2

试试这个，如果有多个控制器你必须使用 $rootScope 来共享数据或者使用 $broadcast

，如果其嵌套 Controller.Use $scope.$parent.option = 0 而不是 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>

在不同的控制器中更改后变量未更新

Variable not updated after change in different controller

controller

apply

angularjs

html

JavaScript