Wie kann man den Header basierend auf der AngularJS-Teilansicht dynamisch ändern?

Lesezeit: 9 Minuten

Wie kann man den Header basierend auf der AngularJS Teilansicht dynamisch
Michael Niedrig

Ich verwende ng-view, um AngularJS-Teilansichten einzuschließen, und ich möchte den Seitentitel und die h1-Header-Tags basierend auf der eingeschlossenen Ansicht aktualisieren. Diese liegen jedoch außerhalb des Bereichs der Controller für Teilansichten, und daher kann ich nicht herausfinden, wie ich sie an den Datensatz in den Controllern binden kann.

Wenn es ASP.NET MVC wäre, könnten Sie dazu @ViewBag verwenden, aber ich kenne das Äquivalent in AngularJS nicht. Ich habe nach gemeinsamen Diensten, Veranstaltungen usw. gesucht, kann es aber immer noch nicht zum Laufen bringen. Jede Möglichkeit, mein Beispiel so zu ändern, dass es funktioniert, wäre sehr willkommen.

Mein HTML:

<html data-ng-app="myModule">
<head>
<!-- include js files -->
<title><!-- should changed when ng-view changes --></title>
</head>
<body>
<h1><!-- should changed when ng-view changes --></h1>

<div data-ng-view></div>

</body>
</html>

Mein JavaScript:

var myModule = angular.module('myModule', []);
myModule.config(['$routeProvider', function($routeProvider) {
    $routeProvider.
        when('/test1', {templateUrl: 'test1.html', controller: Test1Ctrl}).
        when('/test2', {templateUrl: 'test2.html', controller: Test2Ctrl}).
        otherwise({redirectTo: '/test1'});
}]);

function Test1Ctrl($scope, $http) { $scope.header = "Test 1"; 
                                  /* ^ how can I put this in title and h1 */ }
function Test2Ctrl($scope, $http) { $scope.header = "Test 2"; }

  • Dieser Kommentar ist vielleicht spät, aber ich möchte hinzufügen. cssfacts.com/simple-dynamic-meta-tags-in-angularjs Dies kann für festgelegte dynamische Metas nützlich sein. Sie ändern einfach Ihre $rootScope-Metavariable.

    – Kamuran Sönecek

    7. April 2016 um 13:46 Uhr


Wie kann man den Header basierend auf der AngularJS Teilansicht dynamisch
jkoreska

Ich habe gerade eine nette Möglichkeit entdeckt, Ihren Seitentitel festzulegen, wenn Sie Routing verwenden:

Javascript:

var myApp = angular.module('myApp', ['ngResource'])

myApp.config(
    ['$routeProvider', function($routeProvider) {
        $routeProvider.when("https://stackoverflow.com/", {
            title: 'Home',
            templateUrl: '/Assets/Views/Home.html',
            controller: 'HomeController'
        });
        $routeProvider.when('/Product/:id', {
            title: 'Product',
            templateUrl: '/Assets/Views/Product.html',
            controller: 'ProductController'
        });
    }]);

myApp.run(['$rootScope', function($rootScope) {
    $rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
        $rootScope.title = current.$$route.title;
    });
}]);

HTML:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title ng-bind="'myApp &mdash; ' + title">myApp</title>
...

Bearbeiten: Verwendung der ng-bind Attribut statt Curlies {{}} damit sie beim Laden nicht angezeigt werden

  • Richtig, aber Ihr Beispiel zeigt nicht, wie Sie den Titel auf $routeChangeSuccess ändern, der durch $scope-Variablen parametrisiert ist, was das Beispiel von @tosh mit einem Page-Dienst tut. Kannst du also einstellen title = "Blog" aber nicht title = '{{"Blog post " + post.title}}'.

    – Eric Drechsel

    20. Mai 2013 um 20:03 Uhr


  • @felix Sie können auf Titel wie zugreifen current.title Auch

    – Eldelshell

    18. Juli 2013 um 11:18 Uhr

  • $rootScope.title = aktuell.$route.title; ohne doppelte $$

    – david.sansay

    12. September 2013 um 18:58 Uhr


  • Ich habe gerade meine Angular-Version auf mehrere Versionen (1.0.5 auf 1.2.7) aktualisiert und das hat mich in meinem Code kaputt gemacht. Ich benutzte current.$route im alten Code und es funktionierte. Mit dem Upgrade wird das doppelte $ auf Strecke benötigt. current.$$route

    – Tyler Forsythe

    18. März 2014 um 20:18 Uhr

  • In der Antwort wann sehen können '/Product/:id'. Gibt es eine Möglichkeit, die zu haben :id Wert mit dieser Methode ? Ich habe es versucht title: function(params){return params.id;} aber funktioniert nicht … Vielleicht mit resolve ?

    – jbltx

    7. Dezember 2014 um 21:02 Uhr

1646175910 652 Wie kann man den Header basierend auf der AngularJS Teilansicht dynamisch
Tosch

Sie könnten den Controller am definieren <html> Stufe.

 <html ng-app="app" ng-controller="titleCtrl">
   <head>
     <title>{{ Page.title() }}</title>
 ...

Sie erstellen Dienst: Page und von Controllern ändern.

myModule.factory('Page', function() {
   var title="default";
   return {
     title: function() { return title; },
     setTitle: function(newTitle) { title = newTitle }
   };
});

Injizieren Page und Rufen Sie ‘Page.setTitle()’ von Controllern auf.

Hier das konkrete Beispiel: http://plnkr.co/edit/0e7T6l

  • ähm … Ich bin mir nicht sicher, ob es in Betracht gezogen wird, einen Dienst direkt in den $Scope zu platzieren schön in der AngularJS-Architektur. Vielleicht könnte es besser sein, eine Controller-Funktion in $scope einzufügen und diese Funktion dann den Dienst abfragen zu lassen.

    – superjos

    6. März 2013 um 16:31 Uhr

  • Dieses Beispiel war großartig. Ich habe jedoch eine Folge, beim ersten Laden können Sie den Text {{ Page.title() }} im Titel sehen (sehr schnell). Ich glaube nicht, dass Sie ng-cloak verwenden können, da es nicht im Körper ist. Irgendwelche Vorschläge, um dies zu vermeiden?

    – Artur Frankel

    17. Mai 2013 um 19:25 Uhr

  • @ArthurFrankel Verwenden Sie einfach ng-bind (zB ng-bind=”Page.title()”)

    – Pius Uzamere

    14. August 2013 um 0:06 Uhr

  • oder wir können den Controller im Titel-Tag angeben, kein globaler Controller im HTML-Header erforderlich: {{ Page.title() }}

    – Dmitri Algazin

    14. Mai 2014 um 10:12 Uhr


  • Ich persönlich ziehe es vor, den Titel auf die zu setzen $rootScope anstatt einen zusätzlichen Controller zu erstellen.

    – DDA

    18. Juli 2014 um 20:40 Uhr


Beachten Sie, dass Sie den Titel auch direkt mit Javascript festlegen können, dh

$window.document.title = someTitleYouCreated;

Dies hat keine Datenbindung, reicht aber beim Setzen aus ng-app in dem <html> Etikett ist problematisch. (Zum Beispiel die Verwendung von JSP-Vorlagen, bei denen <head> an genau einer Stelle definiert ist, aber Sie haben mehr als eine App.)

  • Dies war die einzige Möglichkeit, es für mich im Internet Explorer zum Laufen zu bringen, die anderen Methoden funktionierten jedoch in anderen Browsern

    – Martin

    5. August 2013 um 7:35 Uhr

  • Wie Maarten erwähnte, ist dies der einzige Ansatz, der in ie7 und ie8 funktioniert

    – rauben

    18. September 2013 um 15:21 Uhr

  • Erstaunlich, wie die Leute nicht zurücktreten und sehen können, wie einfach diese Sache ohne Oszilloskope und Fabriken gemacht werden kann

    – redben

    27. März 2014 um 11:04 Uhr

  • Nicht zu glauben. Das war viel einfacher als all die Spielereien, die andere erwähnten. Danke!

    – Leonhard Teo

    1. Mai 2014 um 1:05 Uhr

  • Die Verwendung eines einfachen “Fensters” ist in Ordnung – das wirkt direkt auf das DOM. ‘$window’ ist ein eckiges Ding, und Sie müssen es injizieren, um es zu verwenden. So oder so wird funktionieren.

    – broc.seib

    22. Dezember 2014 um 16:06 Uhr

1646175910 121 Wie kann man den Header basierend auf der AngularJS Teilansicht dynamisch
Andy Hitchmann

Deklarieren ng-app auf der html -Element stellt den Stammbereich sowohl für die head und body.

Deshalb in deinen Controller einspritzen $rootScope und legen Sie eine Header-Eigenschaft dafür fest:

function Test1Ctrl($rootScope, $scope, $http) { $rootScope.header = "Test 1"; }

function Test2Ctrl($rootScope, $scope, $http) { $rootScope.header = "Test 2"; }

und auf deiner seite:

<title ng-bind="header"></title>

Wie kann man den Header basierend auf der AngularJS Teilansicht dynamisch
Martin Atkins

Das Modul anglejs-viewhead zeigt einen Mechanismus zum Festlegen des Titels pro Ansicht, wobei nur eine benutzerdefinierte Direktive verwendet wird.

Es kann entweder auf ein vorhandenes Ansichtselement angewendet werden, dessen Inhalt bereits der Ansichtstitel ist:

<h2 view-title>About This Site</h2>

…oder es kann als eigenständiges Element verwendet werden. In diesem Fall ist das Element im gerenderten Dokument unsichtbar und wird nur zum Festlegen des Ansichtstitels verwendet:

<view-title>About This Site</view-title>

Der Inhalt dieser Direktive wird im Root-Scope als zur Verfügung gestellt viewTitlesodass es wie jede andere Variable für das Titelelement verwendet werden kann:

<title ng-bind-template="{{viewTitle}} - My Site">My Site</title>

Es kann auch an jeder anderen Stelle verwendet werden, die den Root-Bereich “sehen” kann. Zum Beispiel:

<h1>{{viewTitle}}</h1>

Diese Lösung ermöglicht es, den Titel über denselben Mechanismus festzulegen, der zur Steuerung des Rests der Präsentation verwendet wird: AngularJS-Vorlagen. Dies vermeidet die Notwendigkeit, Controller mit dieser Präsentationslogik zu überladen. Der Verantwortliche muss alle Daten zur Verfügung stellen, die verwendet werden informieren der Titel, aber die Vorlage entscheidet endgültig, wie sie dargestellt wird, und kann Ausdrucksinterpolation und Filter verwenden, um wie gewohnt an Bereichsdaten zu binden.

(Haftungsausschluss: Ich bin der Autor dieses Moduls, aber ich verweise hier nur in der Hoffnung darauf, dass es jemand anderem hilft, dieses Problem zu lösen.)

  • Ich kann nicht glauben, dass diese Lösung nicht mehr positiv bewertet wurde. Die meisten anderen sind wirklich schlechte Designentscheidungen.

    – Martin Wawrusch

    17. August 2014 um 14:47 Uhr

  • Einverstanden, dies sollte die Top-Lösung sein. Das gefällt mir viel besser, als einen Controller auf Seitenebene zum Setzen des Titels zu deklarieren. FYI: Verwenden Sie dies mit Angular v1.3.2 und Angular-Route-Segment v1.3.3 und es funktioniert wie ein Zauber.

    – Nate Barbettini

    12. Dezember 2014 um 16:38 Uhr


  • Ich unterstütze diese Lösung 😉

    – jkoreska

    9. April 2015 um 23:11 Uhr

  • Ich habe hier in meinem Blog etwas mehr über anglejs-viewhead und eine andere verwandte Idee geschrieben: anscheinend.me.uk/angularjs-view-specific-sidebars

    – Martin Atkins

    14. Juni 2015 um 1:00 Uhr

  • Wenn dieselbe Ansicht auf der obersten Ebene und auf der untergeordneten Ansicht wiederverwendet wird, kann man immer noch den Ansichtstitel mit einem ng-if verwenden, z. B.:

    Details für {{…}}

    Details für {{…}}

    – anre

    29. Januar 2016 um 15:57 Uhr


1646175910 176 Wie kann man den Header basierend auf der AngularJS Teilansicht dynamisch
Herr Hasch

Hier ist eine angepasste Lösung, die für mich funktioniert und keine Injektion von $rootScope in Controller erfordert, um ressourcenspezifische Seitentitel festzulegen.

In der Master-Vorlage:

<html data-ng-app="myApp">
    <head>
    <title data-ng-bind="page.title"></title>
    ...

In der Routing-Konfiguration:

$routeProvider.when('/products', {
    title: 'Products',
    templateUrl: '/partials/products.list.html',
    controller: 'ProductsController'
});

$routeProvider.when('/products/:id', {
    templateUrl: '/partials/products.detail.html',
    controller: 'ProductController'
});

Und im Run-Block:

myApp.run(['$rootScope', function($rootScope) {
    $rootScope.page = {
        setTitle: function(title) {
            this.title = title + ' | Site Name';
        }
    }

    $rootScope.$on('$routeChangeSuccess', function(event, current, previous) {
        $rootScope.page.setTitle(current.$$route.title || 'Default Title');
    });
}]);

Endlich in der Steuerung:

function ProductController($scope) {
    //Load product or use resolve in routing
    $scope.page.setTitle($scope.product.name);
}

  • Ich kann nicht glauben, dass diese Lösung nicht mehr positiv bewertet wurde. Die meisten anderen sind wirklich schlechte Designentscheidungen.

    – Martin Wawrusch

    17. August 2014 um 14:47 Uhr

  • Einverstanden, dies sollte die Top-Lösung sein. Das gefällt mir viel besser, als einen Controller auf Seitenebene zum Setzen des Titels zu deklarieren. FYI: Verwenden Sie dies mit Angular v1.3.2 und Angular-Route-Segment v1.3.3 und es funktioniert wie ein Zauber.

    – Nate Barbettini

    12. Dezember 2014 um 16:38 Uhr


  • Ich unterstütze diese Lösung 😉

    – jkoreska

    9. April 2015 um 23:11 Uhr

  • Ich habe hier in meinem Blog etwas mehr über anglejs-viewhead und eine andere verwandte Idee geschrieben: anscheinend.me.uk/angularjs-view-specific-sidebars

    – Martin Atkins

    14. Juni 2015 um 1:00 Uhr

  • Wenn dieselbe Ansicht auf der obersten Ebene und auf der untergeordneten Ansicht wiederverwendet wird, kann man immer noch den Ansichtstitel mit einem ng-if verwenden, z. B.:

    Details für {{…}}

    Details für {{…}}

    – anre

    29. Januar 2016 um 15:57 Uhr


Die Lösung von jkoreska ist perfekt, wenn Sie die Titel vorher kennen, aber Sie müssen den Titel möglicherweise basierend auf Daten festlegen, die Sie von einer Ressource usw. erhalten.

Meine Lösung erfordert einen einzigen Dienst. Da der rootScope die Basis aller DOM-Elemente ist, müssen wir keinen Controller auf das html-Element setzen, wie jemand erwähnt hat

Seite.js

app.service('Page', function($rootScope){
    return {
        setTitle: function(title){
            $rootScope.title = title;
        }
    }
});

index.jade

doctype html
html(ng-app='app')
head
    title(ng-bind='title')
// ...

Alle Controller, die den Titel ändern müssen

app.controller('SomeController', function(Page){
    Page.setTitle("Some Title");
});

  • Kleines Problem, wenn Sie eine Seite aktualisieren, sehen Sie in Ihrem Tab-Namen ‘{{ title }}’ und nachdem die Seite gerendert wurde, sehen Sie nur ‘Some Title’. Lösung mit Fabrik hat dieses Verhalten nicht

    – Dmitri Algazin

    14. Mai 2014 um 10:22 Uhr

  • stattdessen {{title}} verwenden ng-bind='title'

    – Faradox

    7. August 2015 um 5:21 Uhr

  • Stimme @Faradox zu… using ng-bind verhindert, dass die vorinterpolierte Syntax angezeigt wird, bevor der Titel tatsächlich ausgewertet wird. +100

    – Seth

    24. September 2015 um 14:20 Uhr

905810cookie-checkWie kann man den Header basierend auf der AngularJS-Teilansicht dynamisch ändern?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy