Zugang Eltern Controller n Stufen höher

Question

Ich habe eine Seite Controller, vereinfachte hier

angular.module('app').controller('MyCtrl', function() { 
    this.name = 'David' 
}); 

Ich verwende die controllerAs Syntax in meiner Vorlage (MyCtrl als Haupt) so verwende ich nur main.name in meinem Vorlage, um auf den Namen zuzugreifen. Alles gut.

In meiner Vorlage habe ich eine Reihe von verschachtelten Direktiven, die neue Bereiche erstellen und irgendwo unten habe ich eine ng = Controller = "SubCtrl als SubController". Ich kann jetzt auf Eigenschaften auf dem Sub-Controller zugreifen, indem Sie subcontroller.property und innerhalb dieser Vorlage kann ich noch auf main.name zugreifen, weil ControllerAs ist genial.

Das Problem ist, dass ich in meinem zweiten Controller-Code auf Dinge im übergeordneten Controller zugreifen muss, der zu diesem Zeitpunkt n Ebenen tief ist. Ich weiß, ich kann dies in der Hauptsteuerung wie folgt tun ...

$scope.main = this; 

und dann diese

var main = $scope.$parent.$parent.$parent.$parent.main; 

in der zweiten Steuerung zu tun, aber wir alle wissen, wir sollten das nicht tun und ich gewann Ich weiß sowieso nicht, wie viele Ebenen es wirklich ist, weil ich nicht wissen kann, wie viele Anweisungen der Entwickler darin abgelegt hat, um einen neuen Bereich zu erstellen.

Ich höre einige Leute reden über die Schaffung eines Dienstes für diese, aber das klingt wie es wäre schwierig, generisch zu tun, und ich möchte nicht die Benutzer von meinem Framework müssen einen Service jedes Mal erstellen, wenn sie ein Include in ein Tab-Panel, das wäre verrückt.

Also ist meine aktuelle Idee, Bereiche zu verwenden und eine Funktion zu schreiben, die übergeordnete Bereiche durchlaufen wird, bis es den Bereich findet, den Sie mithilfe einer Vergleichsfunktion angeben. Ich denke, dass es einen besseren Weg geben könnte.

Answer 1

Warum also nicht einen Service erstellen? Ein Service ist ein großartiger Ort, um Daten zu speichern oder auf etwas zuzugreifen, das für mehr als einen Controller, eine Richtlinie, eine Fabrik oder was auch immer benötigt wird. Es ist im Grunde ein Singleton, Sie injizieren an mehreren Stellen, aber es wird immer die gleiche Instanz injiziert und wird nur beim ersten Mal erstellt, wenn es benötigt wird. Es ist sehr einfach zu bedienen und viel weniger spröde als das, was Sie im Sinn haben ($parent.$parent.n.....data). Es ist auch viel mehr testbar, wenn Sie Ihre Komponententests durchführen.

var module = angular.module('app'); 

module.service('commonService', function() { 
    this.sharedData = {name: ''}; 
}); 

// assume this gets loaded first 
module.controller('MyCtrl1', ['commonService', function (commonService) { 
    commonService.sharedData.name = 'David' 
}]); 

// and this is loaded somewhere after MyCtrl2 
module.controller('MyCtrl2', ['commonService', function (commonService) { 
    var name = commonService.sharedData.name; 
}]); 

Ich habe nicht die Syntax überprüft, aber dies ist die Grundstruktur, sehr einfach.