Migrację mojej aplikacji opartej na AngularJS używam routera ui zamiast wbudowanego routingu. Mam to skonfigurowane, jak pokazano poniżej
.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' }
})
});
Jak mogę użyć zmiennej pageTitle, aby dynamicznie ustawić tytuł strony? Mogłem to zrobić, korzystając z wbudowanego routingu
$rootScope.$on("$routeChangeSuccess", function(currentRoute, previousRoute){
$rootScope.pageTitle = $route.current.data.pageTitle;
});
a następnie powiąż zmienną w HTML, jak pokazano poniżej
<title ng-bind="$root.pageTitle"></title>
Czy istnieje podobne zdarzenie, do którego mogę podłączyć się za pomocą routera ui? Zauważyłem, że istnieją funkcje „onEnter” i „onExit”, ale wydają się one być powiązane z każdym stanem i będą wymagać ode mnie powtórzenia kodu w celu ustawienia zmiennej $ rootScope dla każdego stanu.
Odpowiedzi:
Użyj
$stateChangeSuccess
.Możesz umieścić to w dyrektywie:
I:
Demo: http://run.plnkr.co/8tqvzlCw62Tl7t4j/#/home
Kod: http://plnkr.co/edit/XO6RyBPURQFPodoFdYgX?p=preview
Nawet został potrzebna historia się być poprawne, przynajmniej jeśli Przetestowałem siebie.
$stateChangeSuccess
$timeout
Edycja: 24 listopada 2014 r. - Podejście deklaratywne:
I:
Demo: http://run.plnkr.co/d4s3qBikieq8egX7/#/credits
Kod: http://plnkr.co/edit/NpzQsxYGofswWQUBGthR?p=preview
źródło
element.text(title)
połączenia w $ timeout działało dla mnie. Edycja oryginalnego posta.resolve
celu wygenerowania go, a następnie przejść do „rozwiązany” wartość podczas $ wydarzenie stateChangeSuccess z:$state.$current.locals.resolve.$$values.NAME_OF_RESOLVE_FUNCTION
.Można to zrobić w inny sposób, łącząc już większość odpowiedzi. Wiem, że już na to odpowiedziano, ale chciałem pokazać sposób, w jaki dynamicznie zmieniam tytuły stron za pomocą routera ui.
Jeśli spojrzysz na przykładową aplikację ui-router , użyje ona bloku angular .run , aby dodać zmienną $ state do $ rootScope.
Dzięki tej definicji możesz łatwo dynamicznie aktualizować tytuł strony o to, co opublikowałeś, ale zmodyfikowałeś, aby używać zdefiniowanego stanu:
Ustaw stan w ten sam sposób:
Ale edytuj trochę HTML ...
Nie mogę powiedzieć, że jest to lepsze niż wcześniejsze odpowiedzi ... ale było dla mnie łatwiejsze do zrozumienia i wdrożenia. Mam nadzieję, że to komuś pomoże!
źródło
$state
i$stateParams
włączenie$rootScope
od wewnątrzrun
.Kątowe-ui-router tytuł plugin ułatwia zaktualizować tytuł strony do statycznej lub dynamicznej wartości w oparciu o bieżący stan. Działa również poprawnie z historią przeglądarki.
źródło
$stateChangeSuccess
jest teraz przestarzałe w UI-Router 1.xi domyślnie wyłączone. Musisz teraz skorzystać z nowej$transition
usługi.Rozwiązanie nie jest zbyt trudne, gdy zrozumiesz, jak
$transition
działa. Mam jakąś pomoc od @troig zrozumieć to wszystko. Oto, co wymyśliłem, aby zaktualizować tytuł.Umieść to w swojej aplikacji Angular 1.6. Zauważ, że używam składni ECMAScript 6; Jeśli nie są, trzeba na przykład zmienić
let
sięvar
.Następnie po prostu dodaj
title
ciąg do swojego stanu:Dzięki temu w tytule pojawią się słowa „Foo Page”. (Jeśli stan nie ma tytułu, tytuł strony nie zostanie zaktualizowany. Łatwo byłoby zaktualizować powyższy kod w celu podania tytułu domyślnego, jeśli stan go nie wskazuje).
Kod umożliwia również użycie funkcji dla
title
.this
Stosowane do wywołania funkcji będzie sam stan, a jeden argument będą parametry stanu, jak to przykładowo:W przypadku ścieżki adresu URL
/bar/code/123
, która jako tytuł strony wyświetla „Kod kreskowy 123”. Zauważ, że używam składni ECMAScript 6 do formatowania ciągu i wyodrębnianiaparams.code
.Byłoby miło, gdyby ktoś, kto ma czas, umieściłby coś takiego w dyrektywie i opublikowałby ją dla wszystkich.
źródło
data
obiektu dla kluczy niestandardowych.title
nie istnieje wStateDeclaration
interfejsie.Dołączanie $ state do $ rootscope w celu użycia w dowolnym miejscu aplikacji.
źródło
Znalazłem ten sposób bardzo prosty:
a potem w moim HTML:
źródło
Po prostu zaktualizuj window.document.title:
W ten sposób „ng-app” nie musi przesuwać się w górę do znacznika HTML i może pozostać w treści lub niżej.
źródło
Używam ngMeta , który działa dobrze nie tylko do ustawiania tytułu strony, ale także opisów. Umożliwia ustawienie konkretnego tytułu / opisu dla każdego stanu, wartości domyślnych, gdy tytuł / opis nie jest określony, a także domyślnych sufiksów tytułów (tj. „| MySiteName”) i wartości autora.
źródło
Twoja pierwsza odpowiedź / pytanie jest naprawdę blisko. Dodaj swój tytuł jako obiekt danych:
W pliku index.html połącz dane bezpośrednio z tytułem strony:
źródło
Skończyło się na takiej kombinacji odpowiedzi Martina i tasseKATTA - prostej i bez żadnych elementów związanych z szablonem:
źródło
Dlaczego nie tylko:
AKTUALIZACJA: Pełny kod dyrektywy
Następnie na każdej stronie wystarczy umieścić tę dyrektywę:
źródło
Jeśli używasz ES6, to działa dobrze :).
źródło
Może możesz wypróbować tę dyrektywę.
https://github.com/afeiship/angular-dynamic-title
Oto przykład:
html:
javascript:
źródło
W przypadku zaktualizowanych wersji UI-Router 1.0.0+ ( https://ui-router.github.io/guide/ng1/migrate-to-1_0 )
Zobacz poniższy kod
Dodaj następujące informacje do swojego index.html:
źródło