Ich migriere meine AngularJS-basierte App, um den UI-Router anstelle des integrierten Routings zu verwenden. Ich habe es wie unten gezeigt konfiguriert
.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl : 'views/home.html',
data : { pageTitle: 'Home' }
})
.state('about', {
url: '/about',
templateUrl : 'views/about.html',
data : { pageTitle: 'About' }
})
});
Wie kann ich die pageTitle-Variable verwenden, um den Titel der Seite dynamisch festzulegen? Mit dem eingebauten Routing könnte ich tun
$rootScope.$on("$routeChangeSuccess", function(currentRoute, previousRoute){
$rootScope.pageTitle = $route.current.data.pageTitle;
});
und binden Sie dann die Variable in HTML wie unten gezeigt
<title ng-bind="$root.pageTitle"></title>
Gibt es ein ähnliches Ereignis, an das ich mich mit dem UI-Router anschließen kann? Ich habe festgestellt, dass es die Funktionen 'onEnter' und 'onExit' gibt, aber sie scheinen an jeden Status gebunden zu sein und erfordern, dass ich den Code wiederhole, um die Variable $ rootScope für jeden Status festzulegen.
Antworten:
Verwenden Sie
$stateChangeSuccess
.Sie können es in eine Direktive setzen:
Und:
Demo: http://run.plnkr.co/8tqvzlCw62Tl7t4j/#/home
Code: http://plnkr.co/edit/XO6RyBPURQFPodoFdYgX?p=preview
Auch bei
$stateChangeSuccess
der$timeout
erforderlich ist für die Geschichte richtig zu sein, zumindest wenn ich habe mich getestet.Bearbeiten: 24. November 2014 - Deklarativer Ansatz:
Und:
Demo: http://run.plnkr.co/d4s3qBikieq8egX7/#/credits
Code: http://plnkr.co/edit/NpzQsxYGofswWQUBGthR?p=preview
quelle
element.text(title)
Anrufs in eine $ -Zeitüberschreitung hat für mich funktioniert. Bearbeiten des ursprünglichen Beitrags.resolve
, um ihn zu generieren, und dann während des $ stateChangeSuccess-Ereignisses auf den "aufgelösten" Wert zugreifen mit :$state.$current.locals.resolve.$$values.NAME_OF_RESOLVE_FUNCTION
.Es gibt eine andere Möglichkeit, dies zu tun, indem die meisten Antworten hier bereits kombiniert werden. Ich weiß, dass dies bereits beantwortet wurde, aber ich wollte zeigen, wie ich Seitentitel mit dem UI-Router dynamisch ändere.
Wenn Sie sich die Beispiel-App von ui-router ansehen , verwenden sie den eckigen .run- Block, um die $ state-Variable zu $ rootScope hinzuzufügen.
Wenn dies definiert ist, können Sie Ihren Seitentitel einfach dynamisch mit dem aktualisieren, was Sie gepostet, aber geändert haben, um den definierten Status zu verwenden:
Richten Sie den Status auf die gleiche Weise ein:
Aber bearbeite das HTML ein bisschen ...
Ich kann nicht sagen, dass dies besser ist als die Antworten zuvor ... aber es war für mich einfacher zu verstehen und umzusetzen. Hoffe das hilft jemandem!
quelle
$state
und$stateParams
auf$rootScope
von innenrun
.Das Angular-UI-Router-Titel- Plugin erleichtert das Aktualisieren des Seitentitels auf einen statischen oder dynamischen Wert basierend auf dem aktuellen Status. Es funktioniert auch korrekt mit dem Browserverlauf.
quelle
$stateChangeSuccess
ist jetzt in UI-Router 1.x veraltet und standardmäßig deaktiviert. Sie müssen jetzt den neuen$transition
Dienst verwenden.Eine Lösung ist nicht allzu schwierig, wenn Sie erst einmal verstanden haben, wie es
$transition
funktioniert. Ich habe Hilfe von @troig bekommen, um alles zu verstehen. Folgendes habe ich mir für die Aktualisierung des Titels ausgedacht.Fügen Sie dies in Ihre Angular 1.6-Anwendung ein. Beachten Sie, dass ich die ECMAScript 6-Syntax verwende. wenn Sie es nicht sind, müssen Sie zB Änderungen
let
zuvar
.Fügen Sie dann einfach eine
title
Zeichenfolge zu Ihrem Status hinzu:Dadurch werden die Wörter "Foo Page" im Titel angezeigt. (Wenn ein Status keinen Titel hat, wird der Seitentitel nicht aktualisiert. Es wäre einfach, den obigen Code zu aktualisieren, um einen Standardtitel bereitzustellen, wenn ein Status keinen angibt.)
Mit dem Code können Sie auch eine Funktion für verwenden
title
. Derthis
zum Aufrufen der Funktion verwendete Wert ist der Status selbst, und das einzige Argument sind die Statusparameter, wie in diesem Beispiel:Für den URL-Pfad
/bar/code/123
, in dem "Barcode 123" als Seitentitel angezeigt wird. Beachten Sie, dass ich die ECMAScript 6-Syntax verwende, um die Zeichenfolge zu formatieren und zu extrahierenparams.code
.Es wäre schön, wenn jemand, der Zeit hätte, so etwas in eine Richtlinie aufnehmen und für alle veröffentlichen würde.
quelle
data
Objekt für benutzerdefinierte Schlüssel.title
existiert nicht auf derStateDeclaration
Schnittstelle.Anhängen von $ state an $ rootcope zur Verwendung an einer beliebigen Stelle in der App.
quelle
Ich fand diesen Weg wirklich einfach:
und dann in meinem HTML so:
quelle
Aktualisieren Sie einfach window.document.title:
Auf diese Weise muss 'ng-app' nicht zum HTML-Tag aufsteigen und kann auf dem Körper oder darunter bleiben.
quelle
Ich verwende ngMeta , das sich nicht nur zum Festlegen des Seitentitels , sondern auch zum Beschreiben von Beschreibungen eignet . Hier können Sie einen bestimmten Titel / eine bestimmte Beschreibung für jeden Status festlegen, standardmäßig, wenn kein Titel / eine Beschreibung angegeben ist, sowie Standardtitelsuffixe (dh '| MySiteName') und einen Autorenwert.
quelle
Sie sind mit Ihrer ersten Antwort / Frage wirklich sehr nah dran. Fügen Sie Ihren Titel als Datenobjekt hinzu:
Binden Sie in Ihrer index.html die Daten direkt an den Seitentitel:
quelle
Am Ende hatte ich diese Kombination aus Martins und tasseKATTs Antworten - einfach und ohne vorlagenbezogene Dinge:
quelle
Warum nicht einfach:
UPDATE: Vollständiger Richtliniencode
Dann würden Sie auf jeder Seite nur diese Anweisung einfügen:
quelle
Wenn Sie ES6 verwenden, funktioniert dies einwandfrei :).
quelle
Vielleicht können Sie diese Richtlinie ausprobieren.
https://github.com/afeiship/angular-dynamic-title
Hier ist das Beispiel:
html:
Javascript:
quelle
Für aktualisierte UI-Router 1.0.0+ Versionen ( https://ui-router.github.io/guide/ng1/migrate-to-1_0 )
Siehe folgenden Code
Fügen Sie Ihrer index.html Folgendes hinzu:
quelle