Wie dynamisch ändern Header basierend auf AngularJS teilweise Ansicht?

Question

Wie dynamisch ändern Header basierend auf AngularJS teilweise Ansicht?

Gefragt el 20 de September, 2012: Wann wurde die Frage gestellt
272281 Ansichten: Anzahl der Besuche der Frage
5 Antworten: Anzahl der Fragenantworten
Gelöst: Aktueller Status der Frage

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 sind außerhalb des Anwendungsbereichs der partiellen Ansicht-Controller aber, und so kann ich nicht herausfinden, wie man sie an Daten in den Controllern festgelegt binden.

Wenn es ASP.NET MVC wäre, könnte man @ViewBag verwenden, aber ich kenne das Äquivalent in AngularJS nicht. Ich habe über gemeinsame Dienste, Ereignisse usw. gesucht, aber immer noch nicht bekommen es funktioniert. Jede Möglichkeit, mein Beispiel zu ändern, so dass es funktioniert, wäre sehr geschätzt werden.

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"; }

Gefragt el 20 de September, 2012 von Michael Low

Answer 1

5 Antworten

Answer 2

5voto

Ashish Punkte 1161

Wenn Sie keine Kontrolle über das Titelelement haben (wie asp.net web form), können Sie folgendes verwenden

var app = angular.module("myApp")
    .config(function ($routeProvider) {
                $routeProvider.when('/', {
                                            title: 'My Page Title',
                                            controller: 'MyController',
                                            templateUrl: 'view/myView.html'
                                        })
                            .otherwise({ redirectTo: '/' });
    })
    .run(function ($rootScope) {
        $rootScope.$on("$routeChangeSuccess", function (event, currentRoute, previousRoute) {
            document.title = currentRoute.title;
        });
    });

Beantwortet el 6 de August, 2013 von Ashish (1161 Punkte )

Answer 3

5voto

JeremyWeir Punkte 23702

Für Szenarien, in denen Sie keine ngApp haben, die die title Tag, injizieren Sie einfach einen Dienst in Controller, die den Fenstertitel setzen müssen.

var app = angular.module('MyApp', []);

app.controller('MyController', function($scope, SomeService, Title){
    var serviceData = SomeService.get();
    Title.set("Title of the page about " + serviceData.firstname);
});

app.factory('SomeService', function ($window) {
    return {
        get: function(){
            return { firstname : "Joe" };
        }
    };
});

app.factory('Title', function ($window) {
    return {
        set: function(val){
            $window.document.title = val;
        }
    };
});

Arbeitsbeispiel... http://jsfiddle.net/8m379/1/

Beantwortet el 19 de Juli, 2013 von JeremyWeir (23702 Punkte )

Answer 4

4voto

user1338062 Punkte 10425

Einfache und schmutzige Methode mit $rootScope :

<html ng-app="project">
<head>
<title ng-bind="title">Placeholder title</title>

Wenn Sie über die notwendigen Daten für die Erstellung des Titels verfügen, tun Sie dies in Ihren Controllern:

$rootScope.title = 'Page X'

Beantwortet el 18 de November, 2013 von user1338062 (10425 Punkte )

Answer 5

4voto

MikeyB Punkte 59

Keine dieser Antworten schien mir intuitiv genug zu sein, also habe ich eine kleine Richtlinie erstellt, um dies zu tun. Auf diese Weise können Sie den Titel in der Seite deklarieren, wo man es normalerweise tun würde, und er kann auch dynamisch sein.

angular.module('myModule').directive('pageTitle', function() {
    return {
        restrict: 'EA',
        link: function($scope, $element) {
            var el = $element[0];
            el.hidden = true; // So the text not actually visible on the page

            var text = function() {
                return el.innerHTML;
            };
            var setTitle = function(title) {
                document.title = title;
            };
            $scope.$watch(text, setTitle);
        }
    };
});

Sie müssen natürlich den Namen des Moduls ändern, damit er Ihrem Namen entspricht.

Um sie zu verwenden, fügen Sie sie einfach in Ihre Ansicht ein, so wie Sie es bei einer normalen <title> Tag:

<page-title>{{titleText}}</page-title>

Sie können auch nur einfachen Text einfügen, wenn Sie ihn nicht dynamisch brauchen:

<page-title>Subpage X</page-title>

Alternativ können Sie auch ein Attribut verwenden, um es IE-freundlicher zu machen:

<div page-title>Title: {{titleText}}</div>

Sie können natürlich jeden beliebigen Text in das Tag einfügen, auch Angular-Code. In diesem Beispiel wird gesucht nach $scope.titleText in dem Controller, in dem sich das Custom-Title-Tag gerade befindet.

Stellen Sie nur sicher, dass Sie nicht mehrere Seitentitel-Tags auf Ihrer Seite haben, da sie sich sonst gegenseitig überlagern.

Plunker Beispiel hier http://plnkr.co/edit/nK63te7BSbCxLeZ2ADHV . Sie müssen die Zip-Datei herunterladen und lokal ausführen, um die Titeländerung zu sehen.

Beantwortet el 21 de Juli, 2014 von MikeyB (59 Punkte )

Answer 6

4voto

the_mishra Punkte 803

Vereinfachte Lösung für angular-ui-router :

HTML :

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

App.js > myApp.config-Block

$stateProvider
    .state("home", {
        title: "My app title this will be binded in html title",
        url: "/home",
        templateUrl: "/home.html",
        controller: "homeCtrl"
    })

App.js>myApp.run

myApp.run(['$rootScope','$state', function($rootScope,$state) {
   $rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
    $rootScope.title = $state.current.title;
    console.log($state);
   });
}]);

Beantwortet el 9 de Juni, 2017 von the_mishra (803 Punkte )

Wie dynamisch ändern Header basierend auf AngularJS teilweise Ansicht?

Antworten

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by:

Wie dynamisch ändern Header basierend auf AngularJS teilweise Ansicht?

Antworten

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by: