Angulaire $parent et $parent.$parents sont du même contrôleur lors de l'utilisation de ng-repeat

J'aimerais comprendre pourquoi lors de l'utilisation d'un ng-repeat avec une certaine contrôleur sur le point de le répéter, le parent de l'élément et le grand-père de cet élément sont le même contrôleur. Je m'attendais à le grand-père d'être le parent d'un contrôleur de parent, pas le même contrôleur.

Ici le code pour clarifier ce

HTML

<div ng-controller="MainController">
  {{name}}
  <div ng-controller="SecondController">
  {{name}}
    <ul>
      <li ng-repeat="item in list" ng-controller="ItemController">
         {{item.name}} {{$parent.name}} {{myDad}} {{myGrandpa}}
      </li>
    </ul>
    <div ng-controller="ThirdController">
         {{name}} {{$parent.name}} {{myDad}} {{myGrandpa}}
    </div>
  </div>
</div>

JS

angular.module('app', []);


angular.module('app')
  .controller('MainController', function($scope) {
  $scope.name = "MainController";
 })
.controller('SecondController', function($scope) {
  $scope.name = "SecondController";
  $scope.list = [
   {'name': 'aaa'}
  ];
})
.controller('ItemController', function($scope) {
  $scope.name = "ItemController";
  $scope.myDad = $scope.$parent.name;
  $scope.myGrandpa = $scope.$parent.$parent.name;
})
.controller('ThirdController', function($scope) {
  $scope.name = "ThirdController";
  $scope.myDad = $scope.$parent.name;
  $scope.myGrandpa = $scope.$parent.$parent.name;
});

Ici un CodePen

La ng-repeat a son propre champ sans doute, beaucoup d'autres directives peuvent créer leurs propres étendues, donc il est préférable de ne pas compter sur $parent. Portée propriétés sont héritées, donc si vous voulez vous assurer que vous avez accès à un certain élément dans un enfant, vous pouvez toujours créer un objet, comme $scope.secondData = {}; et l'accès secondData sur votre périmètre.
Mais dans mon cas, je voudrais $broadcast quelque chose de la forme la grand-parent après une certaine fonction sur le petit-enfant. Donc probablement $rootScope est la meilleure option?

OriginalL'auteur stilllife | 2014-12-26

  1. 4

    Angulaire, $champ d'application hérite et pas des contrôleurs.

    Chaque contrôleur créé par ng-controller crée une nouvelle $scope (childScope) qui hérite de la somme de portée, il existe en. Je pense que vous voudrez peut-être lire ce réponse à comprendre exactement comment $portée hérite (l'héritage par prototype).

    S'il vous plaît pas que vous n'avez pas à utiliser "$parent" afin d'obtenir le nom du parent $champ d'application, par exemple, si vous supprimez $champ d'application.nom de ItemController et qu'on essaie de lier {{nom}} à votre modèle sera compilé et lié et que la valeur de {{nom}} serait "SecondController" dans votre exemple.

    Concernant l' $de diffusion, Vous devriez essayer d'éviter d'utiliser $rootScope.$l'émission, car il va distribuer un événement à la totalité de la somme étendues dans votre application. Je ne suis pas sûr de ce que votre cas d'utilisation, mais si vous voulez exécuter une méthode est définie dans votre "MainController" par exemple, vous pouvez tout aussi bien l'appeler par exemple

    angular.module('app', []);


angular.module('app')
  .controller('MainController', function($scope) {
  $scope.name = "MainController";
  $scope.doSomething = function() {
    console.log("Do it");
  }
 })
.controller('SecondController', function($scope) {
  $scope.name = "SecondController";
  $scope.list = [
   {'name': 'aaa'}
  ];
})
.controller('ItemController', function($scope) {
  $scope.name = "ItemController";
  $scope.myDad = $scope.$parent.name;
  $scope.myGrandpa = $scope.$parent.$parent.name;
  $scope.clickItem = function() {
     console.log("Item clicked");
     $scope.doSomething(); //The method from "MainController" will be executed unless ItemController is isolated 
  }
})
.controller('ThirdController', function($scope) {
  $scope.name = "ThirdController";
  $scope.myDad = $scope.$parent.name;
  $scope.myGrandpa = $scope.$parent.$parent.name;
});

    OriginalL'auteur Asaf David

  2. 0

    Par votre commentaire sur les vouloir de diffusion, vous pouvez utiliser une fonction comme celle-ci et l'appeler à partir de l'enfant:

    //in MainController:
$scope.broadcastMain = function(message) {
    $scope.$broadcast(message);
};

    Alors que la fonction est héréditaire, mais c'est la fermeture aura $scope être de la même portée, il est créé, de sorte que vous pouvez ensuite utiliser $scope.broadcast() à faire à ses enfants. (codepen)

    OriginalL'auteur Jason Goemaat