CODEWITHSUNDEEP
javascriptangularjsangular-ui-routerangular-ui
Jon Harding
Jon Harding

Reputation: 4946

Return $stateParams for dynamic title

I'm able to pass a router parameter when clicking a link to our 'count' page

$state.go('count', {targetName: object.name})

Because of what is established in the router as seen below:

url: '/count/:targetName',

We are using the data: option within UI-Router in combination with $state to dynamically set our page titles

<title ng-bind="'Application Name : ' + $state.current.data.pageTitle"></title>

I would like the pageTitle to include the :targetName. So in order to do that I believe i need to set a function in the data: property of the router. I've tried something like this:

data: {
    pageTitle: function () {
        getTargetName.$inject('$stateParams');
        function getTargetName ($stateParams) {
            return $stateParams.targetName;
        }
    }
}

This doesn't allow the page to resolve at all.

Any tips?

Upvotes: 0

Views: 283

Answers (1)

Radim K&#246;hler
Radim K&#246;hler

Reputation: 123861

There is a working plunker

Let's have these kinds of states 

// this is just a state, with its own pageTitle STRING
.state('home', {
    ...
    data: {
       pageTitle: "Just a home page"
    },
})
// this is a parent state, with URL parameter 'someParam'
// nad pageTitle as a function
.state('parent', {
    ...
    url: "/parent?someParam",
    data: {
        pageTitle: function ($stateParams) {
          return `title with a param ${$stateParams.someParam}`;
        }
    }
})
// and to show that child can change it
.state('parent.child', { 
    ...
    data: {
        pageTitle: "just a child title",
    }
})

to make this line of code working:

<title>The tile is: {{ getTitle() }}  </title>

we can just add small evaluation into $rootScope, but of course, it should be some service... take it as a simplified how to:

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

    $rootScope.getTitle = function(){
      var state = $state.current;
      var params = $stateParams;

      if (state.data
      && state.data.pageTitle) {

        if(typeof (state.data.pageTitle) === "function" ){
          return state.data.pageTitle(params);
        }
        return state.data.pageTitle
      }
      return "no title for this state"
    }
}])

and all these links will have different title

<a href="#/home">
<a ui-sref="parent({someParam: 1})">
<a ui-sref="parent({someParam: 'someValue'})">
<a ui-sref="parent.child">

Check it in action here

Upvotes: 2

Related Questions