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来共享数据或使用$broadcast

，如果它的嵌套Controller.Use $scope.$parent.option = 0而不是var Ctrl1Proxy = $scope.$new();

＆＃13;

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

＆＃13;

Answer 2

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

在不同的控制器

2 个答案:

HTML

的JavaScript