Могу ли я наследовать переменные родительского контроллера?

Вот мой код:

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
}

Я вложен один angular controller внутри другого. Я хотел бы передать переменные первого controller ко второму. Кто-нибудь знает, как это сделать?

Примечание

Я не могу сделать что-то вроде

ChildCtrl.prototype = new ParentCtrl();

потому что я перезапишу свойство people ChildCtrl.

Ответ 1

По умолчанию дочерние области прототипически наследуются от родительской области (см. Scope), поэтому у вас уже есть доступ к родительскому контроллеру $Свойства области в ребёнке. Чтобы доказать это:

function ChildCtrl($scope) {
    alert($scope.people)
}

Ответ 2

Вы ошибаетесь. Вы смешиваете наследование контроллера с наследованием области, и они различны и слабо связаны в 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>

Но поскольку Марк и ganaraj заметили выше, это не имеет смысла, так как вы можете получить доступ к свойству $scope.people из обоих ParentCtrl и ChildCtrl.

Если вы хотите наследовать контроллеры друг от друга, вам нужно использовать наследование прототипов самих функций контроллера.

Ответ 3

Наследование $scope основано на том, где вы ссылаетесь на свои контроллеры с помощью ng-контроллера.

Если у вас есть что-то вроде

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

Тогда да, дочерний контроллер наследует свойства родительского контроллера.

Примечание.. Детский контроллер не должен быть определен для прямого дочернего элемента в html. Это может быть любой ребенок внутри.

Ответ 4

Также вы можете получить объем любого контроллера с помощью DOM:

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

Использование jQuery:

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

Или получить весь документ в документе:

$allScopes = $('.ng-scope').scope()

Ответ 5

Это может помочь вам.

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>