AngularJS Accéder à la portée parente depuis le contrôleur enfant

Question

J'ai configuré mes contrôleurs en utilisant data-ng-controller="xyzController as vm"

J'ai un scénario avec des contrôleurs imbriqués parent/enfant. Je n'ai aucun problème pour accéder aux propriétés du parent dans le html imbriqué en utilisant $parent.vm.property, mais je n'arrive pas à trouver comment accéder à la propriété du parent depuis mon contrôleur enfant.

J'ai essayé d'injecter $scope et ensuite d'utiliser $scope.$parent.vm.property, mais cela ne fonctionne pas?

Quelqu'un peut-il offrir des conseils?

Answer 1

Je crois avoir récemment eu une situation similaire

function parentCtrl() {
   var pc = this; // pc représente le contrôle parent
   pc.foobar = 'SomeVal';
}

function childCtrl($scope) {

   // maintenant comment puis-je obtenir la valeur de la variable parent 'foobar' ?
   // J'ai utilisé $scope.$parent

   var parentFoobarVariableValue = $scope.$parent.pc.foobar;

   // et voilà
}

Ma configuration était un peu différente, mais la même chose devrait probablement toujours fonctionner

Answer 2

À partir d'un composant enfant, vous pouvez accéder aux propriétés et méthodes du composant parent avec 'require'. Voici un exemple :

Parent :

.component('myParent', mymodule.MyParentComponent)
...
controllerAs: 'vm',
...
var vm = this;
vm.parentProperty = 'bonjour depuis le parent';

Enfant :

require: {
    myParentCtrl: '^myParent'
},
controllerAs: 'vm',
...
var vm = this;
vm.myParentCtrl.parentProperty = 'bonjour depuis l'enfant';

Answer 3

Super facile et fonctionne, mais je ne suis pas sûr pourquoi....

angular.module('testing')
  .directive('details', function () {
        return {
              templateUrl: 'components/details.template.html',
              restrict: 'E',                 
              controller: function ($scope) {
                    $scope.details=$scope.details;  <=== peut voir les détails parent en faisant cela                     
              }
        };
  });

Answer 4

Peut-être que c'est nul mais vous pouvez aussi simplement les pointer tous les deux vers un objet externe :

var cities = [];

function ParentCtrl() {
    var vm = this;
    vm.cities = cities;
    vm.cities[0] = 'Oakland';
}

function ChildCtrl($scope) {
    var vm = this;
    vm.cities = cities;
}

L'avantage ici est que les modifications dans ChildCtrl se propagent désormais aux données du parent.