it-swarm.com.de

AngularJS greift über untergeordneten Controller auf den übergeordneten Bereich zu

Ich habe meine Controller mit data-ng-controller="xyzController as vm" eingerichtet

Ich habe ein Szenario mit übergeordneten/untergeordneten verschachtelten Controllern. Ich habe kein Problem beim Zugriff auf übergeordnete Eigenschaften in der verschachtelten HTML-Datei mit $parent.vm.property, aber ich kann nicht herausfinden, wie auf die übergeordnete Eigenschaft von meinem untergeordneten Controller aus zugegriffen wird.

Ich habe versucht, $ scope zu injizieren und dann $scope.$parent.vm.property zu verwenden, aber das funktioniert nicht?

Kann jemand eine Beratung anbieten?

362
zpydee

Wenn Ihr HTML-Code wie folgt aussieht, können Sie Folgendes tun:

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

Dann können Sie wie folgt auf den übergeordneten Bereich zugreifen

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

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

Wenn Sie aus Ihrer Sicht auf einen übergeordneten Controller zugreifen möchten, müssen Sie Folgendes tun:

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

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

Update

Da Sie cities im übergeordneten Controller definiert haben, erbt Ihr untergeordneter Controller alle Bereichsvariablen. Theoretisch müssen Sie also nicht $parent aufrufen. Das obige Beispiel kann auch wie folgt geschrieben werden:

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

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

Die AngularJS-Dokumente verwenden diesen Ansatz, hier können Sie mehr über den $scope lesen.

Ein weiteres Update

Ich denke, das ist eine bessere Antwort auf das Originalposter. 

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;
}

Wenn Sie die Methode controller as verwenden, können Sie auch wie folgt auf den übergeordneten Bereich zugreifen

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

Wie Sie sehen, gibt es viele verschiedene Möglichkeiten, auf $scopes zuzugreifen.

 

Geige aktualisiert

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>

601
Dieterg

Ich habe es gerade überprüft

$scope.$parent.someProperty

funktioniert bei mir.

und es wird sein 

{{$parent.someProperty}}

für die Aussicht.

45
Stepan Suvorov

Wenn Sie die as-Syntax verwenden, z. B. ParentController as parentCtrl, um einen Controller zu definieren, verwenden Sie folgende Befehle, um auf die übergeordnete Bereichsvariable in untergeordneter Controller zuzugreifen:

var id = $scope.parentCtrl.id;

Dabei ist parentCtrl der Name des übergeordneten Controllers, der die as-Syntax verwendet, und id ist eine Variable, die in demselben Controller definiert ist.

7
Rubi saini

Manchmal müssen Sie übergeordnete Eigenschaften direkt im untergeordneten Bereich aktualisieren. z.B. Sie müssen ein Datum und eine Uhrzeit der übergeordneten Steuerung nach Änderungen durch einen untergeordneten Controller speichern. z.B. Code 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) {

    }
2
Gayan Pathirage

Sie können auch die Bereichsvererbung umgehen und Dinge im "globalen" Bereich speichern.

Wenn sich in Ihrer Anwendung ein Hauptcontroller befindet, der alle anderen Controller umschließt, können Sie einen "Haken" für den globalen Bereich installieren:

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

In jedem untergeordneten Controller können Sie dann mit $scope.root auf den Bereich "global" zugreifen. Alles, was Sie hier einstellen, ist global sichtbar.

Beispiel:

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>

1
rustyx

Ich glaube, ich hatte kürzlich ein ähnliches Dilemma

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
}

Mein Setup war etwas anders, aber wahrscheinlich sollte das gleiche noch funktionieren

0
Benjamin Thvedt

Von einer untergeordneten Komponente aus können Sie mit 'required' auf die Eigenschaften und Methoden der übergeordneten Komponente zugreifen. Hier ist ein Beispiel:

Elternteil:

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

Kind:

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

Super einfach und funktioniert, aber nicht sicher warum ...

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                     
              }
        };
  });
0
John Peters