AngularJS accede all'ambito padre dal controller figlio

Ho impostato i miei controller usando data-ng-controller="xyzController as vm"

Ho uno scenario con controller nidificati padre / figlio. Non ho problemi ad accedere alle proprietà parent nell'html nidificato usando $parent.vm.property, ma non riesco a capire come accedere alla proprietà parent dal mio controller figlio.

Ho provato a iniettare $ scope e poi a usarlo $scope.$parent.vm.property, ma questo non funziona?

Qualcuno può offrire consigli?

Se il tuo HTML è come sotto puoi fare qualcosa del genere:

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

Quindi è possibile accedere all'ambito padre come segue

function ParentCtrl($scope) {
    $scope.cities = ["NY", "Amsterdam", "Barcelona"];
}

function ChildCtrl($scope) {
    $scope.parentcities = $scope.$parent.cities;
}

Se vuoi accedere a un controller genitore dal tuo punto di vista devi fare qualcosa del genere:

<div ng-controller="xyzController as vm">
   {{$parent.property}}
</div>

Vedi jsFiddle: http://jsfiddle.net/2r728/

Aggiornare

In realtà, poiché è stato definito citiesnel controller padre, il controller figlio erediterà tutte le variabili dell'ambito. Quindi teoricamente non devi chiamare $parent. L'esempio sopra può anche essere scritto come segue:

function ParentCtrl($scope) {
    $scope.cities = ["NY","Amsterdam","Barcelona"];
}

function ChildCtrl($scope) {
    $scope.parentCities = $scope.cities;
}

I documenti di AngularJS usano questo approccio, qui puoi leggere di più sul $scope.

Un altro aggiornamento

Penso che questa sia una risposta migliore al poster originale.

HTML

<div ng-app ng-controller="ParentCtrl as pc">
    <div ng-controller="ChildCtrl as cc">
        <pre>{{cc.parentCities | json}}</pre>
        <pre>{{pc.cities | json}}</pre>
    </div>
</div>

JS

function ParentCtrl() {
    var vm = this;
    vm.cities = ["NY", "Amsterdam", "Barcelona"];
}

function ChildCtrl() {
    var vm = this;
    ParentCtrl.apply(vm, arguments); // Inherit parent control

    vm.parentCities = vm.cities;
}

Se si utilizza il controller asmetodo è anche possibile accedere all'ambito padre come segue

function ChildCtrl($scope) {
    var vm = this;
    vm.parentCities = $scope.pc.cities; // note pc is a reference to the "ParentCtrl as pc"
}

Come puoi vedere ci sono molti modi diversi di accedere $scopes.

Violino aggiornato

function ParentCtrl() {
    var vm = this;
    vm.cities = ["NY", "Amsterdam", "Barcelona"];
}
    
function ChildCtrl($scope) {
    var vm = this;
    ParentCtrl.apply(vm, arguments);
    
    vm.parentCitiesByScope = $scope.pc.cities;
    vm.parentCities = vm.cities;
}
    

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js"></script>
<div ng-app ng-controller="ParentCtrl as pc">
  <div ng-controller="ChildCtrl as cc">
    <pre>{{cc.parentCities | json}}</pre>
    <pre>{{cc.parentCitiesByScope | json }}</pre>
    <pre>{{pc.cities | json}}</pre>
  </div>
</div>

Ho appena controllato

$scope.$parent.someProperty

per me va bene.

e lo sarà

{{$parent.someProperty}}

per la vista.

Quando si utilizza la assintassi, ad esempio ParentController as parentCtrl, per definire un controller, quindi per accedere alla variabile dell'ambito padre nel controller figlio utilizzare quanto segue:

var id = $scope.parentCtrl.id;

Dove si parentCtrltrova il nome del controller principale che utilizza la assintassi ed idè una variabile definita nello stesso controller.

Alcune volte potrebbe essere necessario aggiornare le proprietà del genitore direttamente nell'ambito del figlio. ad esempio, è necessario salvare una data e ora del controllo parent dopo le modifiche apportate da un controller figlio. ad es. codice in JSFiddle

HTML

<div ng-app>
<div ng-controller="Parent">
    event.date = {{event.date}} <br/>
    event.time = {{event.time}} <br/>
    <div ng-controller="Child">
        event.date = {{event.date}}<br/>
        event.time = {{event.time}}<br/>
        <br>
        event.date: <input ng-model='event.date'><br>
        event.time: <input ng-model='event.time'><br>
    </div>
</div>

JS

    function Parent($scope) {
       $scope.event = {
        date: '2014/01/1',
        time: '10:01 AM'
       }
    }

    function Child($scope) {

    }

È inoltre possibile aggirare l'ereditarietà dell'ambito e archiviare oggetti nell'ambito "globale".

Se nell'applicazione è presente un controller principale che avvolge tutti gli altri controller, è possibile installare un "hook" nell'ambito globale:

function RootCtrl($scope) {
    $scope.root = $scope;
}

Quindi, in qualsiasi controller figlio, è possibile accedere all'ambito "globale" con $scope.root. Tutto ciò che hai impostato qui sarà visibile a livello globale.

Esempio:

function RootCtrl($scope) {
  $scope.root = $scope;
}

function ChildCtrl($scope) {
  $scope.setValue = function() {
    $scope.root.someGlobalVar = 'someVal';
  }
}

function OtherChildCtrl($scope) {
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app ng-controller="RootCtrl">
  
  <p ng-controller="ChildCtrl">
    <button ng-click="setValue()">Set someGlobalVar</button>
  </p>
  
  <p ng-controller="OtherChildCtrl">
    someGlobalVar value: {{someGlobalVar}}
  </p>

</div>

Credo di aver avuto un dilemma simile di recente

function parentCtrl() {
   var pc = this; // pc stands for parent control
   pc.foobar = 'SomeVal';
}

function childCtrl($scope) {

   // now how do I get the parent control 'foobar' variable?
   // I used $scope.$parent

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

   // that did it
}

La mia configurazione era un po 'diversa, ma probabilmente la stessa cosa dovrebbe ancora funzionare

Da un componente figlio è possibile accedere alle proprietà e ai metodi del componente padre con 'richiedi'. Ecco un esempio:

Genitore:

.component('myParent', mymodule.MyParentComponent)
...
controllerAs: 'vm',
...
var vm = this;
vm.parentProperty = 'hello from parent';

Bambino:

require: {
    myParentCtrl: '^myParent'
},
controllerAs: 'vm',
...
var vm = this;
vm.myParentCtrl.parentProperty = 'hello from child';

Super facile e funziona, ma non so perché ...

angular.module('testing')
  .directive('details', function () {
        return {
              templateUrl: 'components/details.template.html',
              restrict: 'E',                 
              controller: function ($scope) {
                    $scope.details=$scope.details;  <=== can see the parent details doing this                     
              }
        };
  });

Forse questo è zoppo, ma puoi anche puntarli entrambi verso un oggetto esterno:

var cities = [];

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

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

Il vantaggio qui è che le modifiche in ChildCtrl ora ripropongono i dati nel genitore.