33

Here is my code:

function ParentCtrl($scope) {
$scope.people = ["Tom", "Dick", "Harry"];
$scope.count = $scope.people.length;
}

function ChildCtrl($scope) {
$scope.parentpeople = ParentCtrl.people //this is what I would like to do ideally
}

I am nesting one angular controller inside of another one. I would like to pass variables of the first controller to the second one. Does anyone know how to do this?

NOTE

I cannot do something like

ChildCtrl.prototype = new ParentCtrl();

because I will overwrite the people property of the ChildCtrl.

4

5 回答 5

46

默认情况下，子范围原型继承自父范围（请参阅Scope），因此您已经可以访问子控制器中父控制器的 $scope 属性。为了证明它：

function ChildCtrl($scope) {
    alert($scope.people)
}
于 2012-08-18T14:56:27.290 回答
25

你搞错了。您将控制器继承与范围继承混合在一起，它们在 AngularJS 中是不同的且松散耦合的。

你真正想要的是：

function ParentCtrl($scope) {
    $scope.people = ["Tom", "Dick", "Harry"];
    $scope.count = $scope.people.length;
}

function ChildCtrl($scope) {
    $scope.parentpeople = $scope.$parent.people;
}

它适用于这种情况：

<div ng-controller="ParentCtrl">
    <div ng-controller="ChildCtrl">
    </div>
</div>

但正如 Mark 和 ganaraj 上面注意到的那样，这没有任何意义，因为您可以从 ParentCtrl 和 ChildCtrl 访问 $scope.people 的属性。

如果要相互继承控制器，则需要使用控制器函数本身的原型继承。

于 2012-10-04T14:33:55.450 回答
9

$scope 继承基于您使用 ng-controller 引用控制器的位置。

如果你有类似的东西

<div ng-controller="ParentController">
    <div ng-controller="ChildController">
    </div>
</div>

那么是的，子控制器将继承父控制器的属性。

注意：子控制器不需要在 html 中的直接子级上定义。它可以是里面的任何孩子。

于 2012-08-17T15:24:02.933 回答
4

您还可以通过 DOM 获取任何控制器的范围：

$needleScope = angular.element(aDomElement).scope()

使用 jQuery：

$needleScope = $('#aDomElementId').scope()

或者获取文档中的所有Scope：

$allScopes = $('.ng-scope').scope()
于 2014-02-12T19:44:32.360 回答
0

可能对你有帮助！！！

Scope 是一个特殊的 JavaScript 对象，用于连接控制器和视图。范围包含模型数据。在控制器中，模型数据通过 $scope 对象访问。

<script>
      var mainApp = angular.module("mainApp", []);

      mainApp.controller("shapeController", function($scope) {
         $scope.message = "In shape controller";
         $scope.type = "Shape";
      });
</script>

范围继承范围是特定于控制器的。如果我们定义嵌套控制器，那么子控制器继承其父控制器的作用域。

<script>
      var mainApp = angular.module("mainApp", []);

      mainApp.controller("shapeController", function($scope) {
         $scope.message = "In shape controller";
         $scope.type = "Shape";
      });

      mainApp.controller("circleController", function($scope) {
         $scope.message = "In circle controller";   
      });
</script>

现场示例如下。

<html>
    <head>
       <title>Angular JS Forms</title>
    </head>
    <body>
       <h2>AngularJS Sample Application</h2>
       <div ng-app="mainApp" ng-controller="shapeController">
          <p>{{message}} <br/> {{type}} </p>
          <div ng-controller="circleController">
             <p>{{message}} <br/> {{type}} </p>
          </div>
          <div ng-controller="squareController">
             <p>{{message}} <br/> {{type}} </p>
          </div>
       </div>
       <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
       <script>
          var mainApp = angular.module("mainApp", []);

          mainApp.controller("shapeController", function($scope) {
             $scope.message = "In shape controller";
             $scope.type = "Shape";
          });

          mainApp.controller("circleController", function($scope) {
             $scope.message = "In circle controller";   
          });

          mainApp.controller("squareController", function($scope) {
             $scope.message = "In square controller";
             $scope.type = "Square";
          });

       </script>
    </body>
    </html>
于 2015-02-21T06:03:35.203 回答