dynamischer Header/Menü in angularjs

Question

Beim Übergang einer vorhandenen eckigen Website stieß ich auf ein lästiges Problem. Das anfängliche Symptom war, dass ein bestimmter Controller seine Initialisierungsfunktion nicht sofort nach der Anmeldung ausgeführt hat. Ich loggte und ich verfolgte, und schließlich erkannte ich, dass es ein Designfehler der Seite war. Im Wesentlichen enthält index.html eine <header>, <ng-view> und <footer>. Es gibt ein paar ng-if Attribute, die in der Kopfzeile leben, die ich nach der Anmeldung auswerten möchte, aber da die Ansicht die einzige Sache ist, die neu geladen wird, initialisierte sie den Header-Controller nicht neu und aktualisierte die ng-if-Werte nicht .

Dann wurde ich an ngInclude erinnert, die wie die perfekte Lösung scheint, bis ich es angeschlossen und erkennen, dass auch nicht funktioniert. Es lädt die Vorlage das erste Mal und wird nicht neu initialisiert, wenn sich die Ansicht ändert. Also hatte ich die gute Idee, den HeaderController an einen anderen Controller oder Dienst zu übergeben und diesen störenden booleschen Wert über einen Proxy zu kontrollieren. Das hat auch nicht funktioniert. Dann habe ich versucht, eine Funktion und einen Boolean in einen anderen Dienst zu setzen und diese Eigenschaft im Header-Controller zu spiegeln, aber bis jetzt habe ich das nicht funktioniert.

Ich habe viel Forschung über mehrere Ansichten im Index gemacht, und bis jetzt höre ich viel über diesen UI-Router, aber ich bin immer noch nicht überzeugt, dass das die Art ist, die ich gehen möchte. Es scheint keine einfache Lösung zu sein. Ich habe auch noch nicht versucht, das ng-include in die Templates zu setzen, weil ich dann das Gefühl habe, dass wir jedes Mal, wenn wir das Menü änderten, 100 Seiten aktualisieren mussten.

Ich habe einen ganzen Tag verloren. Wenn mir jemand sagen könnte, wie ich die Auswertung dieser einen Eigenschaft in meinem Header-Controller anstoßen könnte, die ich außerhalb der anderen Vorlagen leben möchte, lass es mich wissen!

Answer 1

Ok, also müssen Sie in Ihrem HeaderController wissen, wenn die Ansicht neu geladen hat. Es gibt eine Reihe von Möglichkeiten, dies zu tun, aber die leichtere und vielleicht die korrektere in diesem speziellen Fall ist mit einem Ereignis.

Also, wenn Sie die Ansicht aktualisieren, tun Sie dies einfach, nehmen wir an, Sie benötigen den neuen Wert ob1 und ob2 Variablen.

// ViewController 
$rootScope.$emit('viewRefresh', {ob1: 'newvalue1', ob2: 'newvalue2'}); 

Und in Ihrem HeaderController Sie brauchen für dieses Ereignis zu hören, und legen Sie auf Ihrem $ Umfang die neuen Werte für die attrs (wenn Sie controller as Syntax nicht verwenden).

// HeaderController 
$rootScope.$on('viewRefresh', function onRefresh(event, data) { 
    $scope.ob1 = data.ob1; 
    $scope.ob2 = data.ob2; 
}) 

Eine andere Lösung Teilen eines Versprechen durch einen Service (mit $q)

function HeaderService($q) { 
    var defer = $q.defer(); 
    return { 
     getPromise: function() {return defer.promise}, 
     notify: function(data) {defer.notify(data)} 
    } 
} 

function HeaderController(HeaderService) { 
    var vm = this; 
    HeaderService.getPromise().then(function(data) { 
     vm.ob1 = data.ob1; 
     vm.ob2 = data.ob2; 
    }) 
} 


function ViewController(HeaderService) { 
    var data = {ob1: 'newvalue1', ob2: 'newvalue2'}; 
    HeaderService.notify(data) 
}