Angular ui router, title dynamic

Question

How I spend a parameter title of the post, to display the browser's title?

I use pageTitle parameter on my route, but if put directly: slug as a value, not works.

.state('posts',{
    url         : '/blog/:slug',
    templateUrl : 'content/templates/single.html',
    controller  : 'SinglePostController',
    data: {
        pageTitle: 'title'
    },
    access: {
        requiredLogin: false
    }
})

Do you wanted to put slug on your browser title? but then what would be title for the other states? — Pankaj Parkar
– Pankaj Parkar, Commented Nov 1, 2015 at 20:23

Community · Accepted Answer · 2017-05-23 12:14:33Z

2

The data : {} setting is static.

see similar:

Accessing parameters in custom data

If you want some dynamic feature use resolve : {}

Some links to examples and Q & A about resolve

Angularjs ui-router abstract state with resolve

EXTEND: A simple (really naive but working) example how to use resolve and $rootScope to manage browser title (check it here):

$stateProvider
  .state('home', {
      url: "/home",
      templateUrl: 'tpl.html',
      resolve: {
        'title': ['$rootScope', function($rootScope){
          $rootScope.title = "Other title";
        }],
      }
  })
  .state('parent', {
      url: "/parent",
      templateUrl: 'tpl.html',
      resolve: {
        'title': ['$rootScope', function($rootScope){
          $rootScope.title = "Title from Parent";
        }],
      }
  })
  .state('parent.child', { 
      url: "/child",
      templateUrl: 'tpl.html',
      controller: 'ChildCtrl',
      resolve: {
        'titleFromChild': ['$rootScope', function($rootScope){
          $rootScope.title = "Title from Child";
        }],
      }
  })

And this could be the html

<!DOCTYPE html>
<html ng-app="MyApp" ng-strict-di>

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

Try it here

A challenge here is - what to do on navigation from child to parent, but it could be done by moving that setting into controller and work with $scope.$on('detsroy'...

Here is adjusted plunker

.state('parent.child', { 
      url: "/child",
      templateUrl: 'tpl.html',
      controller: 'ChildCtrl',
      // no resolve, just controller fills the target
  })

.controller('ChildCtrl', ['$rootScope', '$scope', function ($rootScope, $scope) { 
  var title = $rootScope.title;
  $rootScope.title = "Title from Child";
  $scope.$on('$destroy', function(){$rootScope.title = title});
}])

edited May 23, 2017 at 12:14

CommunityBot

11 silver badge

answered Nov 1, 2015 at 20:09

Radim Köhler

124k48 gold badges243 silver badges343 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Marco Riesco Over a year ago

Okay, now step as the slug parameter to solve? Direct by stateParams? and set with rootScope?

Radim Köhler Over a year ago

@MarcoRiesco, if I do understand your issue, this should be the best asnwer for you: stackoverflow.com/q/30268800/1679310

Marco Riesco Over a year ago

my issue is on browser title

Radim Köhler Over a year ago

Browser title - the best way is $rootScope value.. changed in controller or resolve

Marco Riesco Over a year ago

Could you give me an example of how it's done in resolve, with rootscope?

|

Collectives™ on Stack Overflow

Angular ui router, title dynamic

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related