Stellen Sie den Seitentitel mit dem UI-Router ein

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.

Verwenden Sie $stateChangeSuccess.

Sie können es in eine Direktive setzen:

app.directive('updateTitle', ['$rootScope', '$timeout',
  function($rootScope, $timeout) {
    return {
      link: function(scope, element) {

        var listener = function(event, toState) {

          var title = 'Default Title';
          if (toState.data && toState.data.pageTitle) title = toState.data.pageTitle;

          $timeout(function() {
            element.text(title);
          }, 0, false);
        };

        $rootScope.$on('$stateChangeSuccess', listener);
      }
    };
  }
]);

Und:

<title update-title></title>

Demo: http://run.plnkr.co/8tqvzlCw62Tl7t4j/#/home

Code: http://plnkr.co/edit/XO6RyBPURQFPodoFdYgX?p=preview

Auch bei $stateChangeSuccessder $timeouterforderlich ist für die Geschichte richtig zu sein, zumindest wenn ich habe mich getestet.

Bearbeiten: 24. November 2014 - Deklarativer Ansatz:

app.directive('title', ['$rootScope', '$timeout',
  function($rootScope, $timeout) {
    return {
      link: function() {

        var listener = function(event, toState) {

          $timeout(function() {
            $rootScope.title = (toState.data && toState.data.pageTitle) 
            ? toState.data.pageTitle 
            : 'Default title';
          });
        };

        $rootScope.$on('$stateChangeSuccess', listener);
      }
    };
  }
]);

Und:

<title>{{title}}</title>

Demo: http://run.plnkr.co/d4s3qBikieq8egX7/#/credits

Code: http://plnkr.co/edit/NpzQsxYGofswWQUBGthR?p=preview

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.

// It's very handy to add references to $state and $stateParams to the $rootScope
// so that you can access them from any scope within your applications.
// For example, <li ng-class="{ active: $state.includes('contacts.list') }"> 
// will set the <li> to active whenever 'contacts.list' or one of its 
// decendents is active.

.run([ '$rootScope', '$state', '$stateParams',
function ($rootScope, $state, $stateParams) {
  $rootScope.$state = $state;
  $rootScope.$stateParams = $stateParams;
}])

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:

.state('home', {
    url: '/home',
    templateUrl : 'views/home.html',
    data : { pageTitle: 'Home' }
})

Aber bearbeite das HTML ein bisschen ...

<title ng-bind="$state.current.data.pageTitle"></title>

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!

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.

$stateChangeSuccessist jetzt in UI-Router 1.x veraltet und standardmäßig deaktiviert. Sie müssen jetzt den neuen $transitionDienst verwenden.

Eine Lösung ist nicht allzu schwierig, wenn Sie erst einmal verstanden haben, wie es $transitionfunktioniert. 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 letzu var.

.run(function($transitions, $window) {
    $transitions.onSuccess({}, (transition) => {
        let title = transition.to().title;
        if (title) {
            if (title instanceof Function) {
                title = title.call(transition.to(), transition.params());
            }
            $window.document.title = title;
        }
    });

Fügen Sie dann einfach eine titleZeichenfolge zu Ihrem Status hinzu:

$stateProvider.state({
    name: "foo",
    url: "/foo",
    template: "<foo-widget layout='row'/>",
    title: "Foo Page""
});

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. Der thiszum Aufrufen der Funktion verwendete Wert ist der Status selbst, und das einzige Argument sind die Statusparameter, wie in diesem Beispiel:

$stateProvider.state({
    name: "bar",
    url: "/bar/{code}",
    template: "<bar-widget code='{{code}}' layout='row'/>",
    title: function(params) {
        return `Bar Code ${params.code}`;
    }
});

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 extrahieren params.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.

Anhängen von $ state an $ rootcope zur Verwendung an einer beliebigen Stelle in der App.

app.run(['$rootScope', '$state', '$stateParams',
    function ($rootScope,   $state,   $stateParams) {

        // It's very handy to add references to $state and $stateParams to the $rootScope
        // so that you can access them from any scope within your applications.For example,
        // <li ng-class="{ active: $state.includes('contacts.list') }"> will set the <li>
        // to active whenever 'contacts.list' or one of its decendents is active.
        $rootScope.$state = $state;
        $rootScope.$stateParams = $stateParams;
    }
  ]
)

<title ng-bind="$state.current.name + ' - ui-router'">about - ui-router</title>

Ich fand diesen Weg wirklich einfach:

  .state('app.staff.client', {
    url: '/client/mine',
    title: 'My Clients'})

und dann in meinem HTML so:

<h3>{{ $state.current.title }}</h3>

Aktualisieren Sie einfach window.document.title:

.state('login', {
   url: '/login',
   templateUrl: "/Login",
   controller: "loginCtrl",
   onEnter: function($window){$window.document.title = "App Login"; }
})

Auf diese Weise muss 'ng-app' nicht zum HTML-Tag aufsteigen und kann auf dem Körper oder darunter bleiben.

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.

$stateProvider
  .state('home', {
    url: '/',
    templateUrl: 'views/home.html',
    controller: 'HomeController',
    meta: {
      'title': 'Home',
      'titleSuffix': ' | MySiteName',
      'description': 'This is my home page description lorem ipsum.'
    },
  })

Sie sind mit Ihrer ersten Antwort / Frage wirklich sehr nah dran. Fügen Sie Ihren Titel als Datenobjekt hinzu:

.state('home', {
    url: '/home',
    templateUrl : 'views/home.html',
    data : { pageTitle: 'Home' }
})

Binden Sie in Ihrer index.html die Daten direkt an den Seitentitel:

<title data-ng-bind="$state.current.data.pageTitle + ' - Optional text'">Failsafe text</title>

Am Ende hatte ich diese Kombination aus Martins und tasseKATTs Antworten - einfach und ohne vorlagenbezogene Dinge:

$rootScope.$on("$stateChangeSuccess", function (event, toState) {
   $timeout(function () { // Needed to ensure the title is changed *after* the url so that history entries are correct.
     $window.document.title = toState.name; 
   });
});

Warum nicht einfach:

$window.document.title = 'Title';

UPDATE: Vollständiger Richtliniencode

var DIRECTIVE = 'yourPageTitle';

yourPageTitle.$inject = ['$window'];
function yourPageTitle($window: ng.IWindowService): ng.IDirective {

    return {
        link: (scope, element, attrs) => {

            attrs.$observe(DIRECTIVE, (value: string) => {

                $window.document.title = value;
            });
        }
    }
}

directive(DIRECTIVE, yourPageTitle);

Dann würden Sie auf jeder Seite nur diese Anweisung einfügen:

<section
    your-page-title="{{'somePage' | translate}}">

Wenn Sie ES6 verwenden, funktioniert dies einwandfrei :).

class PageTitle {
    constructor($compile, $timeout) {
        this.restrict = 'A';
        this._$compile = $compile;
        this.$timeout = $timeout;
    }

    compile(element) {
        return this.link.bind(this);
    }

    link(scope, element, attrs, controller) {
        let defaultTitle = attrs.pageTitle ? attrs.pageTitle : "My Awesome Sauce Site";
        let listener = function(event, toState) {
            let title = defaultTitle;
            if (toState.data && toState.data.title) title = toState.data.title + ' | ' + title;
            $('html head title').text(title);
        };
        scope.$on('$stateChangeStart', listener);
    }
}

export function directiveFactory($compile) {
    return new PageTitle($compile);
}

directiveFactory.injections = ['$compile', '$timeout'];

export default PageTitle;

Vielleicht können Sie diese Richtlinie ausprobieren.

https://github.com/afeiship/angular-dynamic-title

Hier ist das Beispiel:

html:

<title dynamic-title>Title</title>

<a href="javascript:;" ui-sref="state1">State1 page</a>
<a href="javascript:;" ui-sref="state2">State2 page</a>

Javascript:

var TestModule = angular.module('TestApp', ['ui.router','nx.widget'])
    .config(function ($stateProvider, $urlRouterProvider) {
      //
      // For any unmatched url, redirect to /state1
      $urlRouterProvider.otherwise("/state1");
      //
      // Now set up the states
      $stateProvider
        .state('state1', {
          url: "/state1",
          templateUrl: "partials/state1.html",
          data:{
            pageTitle:'State1 page title11111'
          }
        })
        .state('state2', {
          url: "/state2",
          templateUrl: "partials/state2.html",data:{
            pageTitle:'State2 page title222222'
          }
        });
    })
    .controller('MainCtrl', function ($scope) {
      console.log('initial ctrl!');
    });

Für aktualisierte UI-Router 1.0.0+ Versionen ( https://ui-router.github.io/guide/ng1/migrate-to-1_0 )

Siehe folgenden Code

app.directive('pageTitle', [
    '$rootScope',
    '$timeout',
    '$transitions',
    function($rootScope, $timeout,$transitions) {
        return {
            restrict: 'A',
            link: function() {
                var listener = function($transitions) {
                    var default_title = "DEFAULT_TITLE";
                    $timeout(function() {
                        	$rootScope.page_title = ($transitions.$to().data && $transitions.$to().data.pageTitle)
                            ? default_title + ' - ' + $transitions.$to().data.pageTitle : default_title;
                    	
                        
                    });
                };
                $transitions.onSuccess({ }, listener);
            }
        }
    }
])

Fügen Sie Ihrer index.html Folgendes hinzu:

<title page-title ng-bind="page_title"></title>