javascript - Can't access $state.current.data in angular ui-router as per documentation -

javascript - Can't access $state.current.data in angular ui-router as per documentation -

i trying dynamically update page title.

consider state defined thus:

$stateprovider.state('login', { url: '/login', templateurl: '/templates/views/login.html', controller: 'authctrl', data: {title: 'log in'} }

in page head section:

<title page-title></title>

according to documentation, supposed able access custom info property:

app.directive("pagetitle", function ($state) { homecoming { restrict: 'a', template: "{{title}}", scope: {}, link: function (scope, elem, attr) { scope.title=$state.current.data.title; //wrap in $watch console.log('page state',$state.current.data.title); } } });

but returns undefined. ideas? thanks!

the variable indeed available page, in directive, have created isolated scope. whenever utilize scope: {} alternative on directive, creates scope limited directive only.

you have 2 options help solve issue.

you can create directive without scope:{} option, allow directive total access scope exists on parent page. drawback here limits utilize of directive single instance per scope. create binding in scope alternative , pass variable html directive

directive: scope: {title: '=title'}

html: <title><page-title title="{{$state.current.data.title}}"></page-title></title>

javascript angularjs