I am trying to dynamically update the page title.
Consider a state defined thus:
$stateProvider.state('login', {
url: '/login',
templateUrl: '/templates/views/login.html',
controller: 'AuthCtrl',
data: {title: 'Log in'}
}
In the page HEAD section:
<title page-title></title>
According to the documentation, I am supposed to be able to access my custom data property :
app.directive("pageTitle", function ($state) {
return {
restrict: 'A',
template: "{{title}}",
scope: {},
link: function (scope, elem, attr) {
scope.title=$state.current.data.title; //wrap this in $watch
console.log('page state',$state.current.data.title);
}
}
});
But this returns undefined
. Any ideas? Thanks!
The variable is indeed available to the page, but in your directive, you have created an isolated scope . whenever you use the scope: {}
option on a directive, it creates a scope which is limited to the directive only.
You have two options which will help to solve this issue.
scope:{}
option, which would allow the directive full access to the scope
which exists on the parent page. The drawback here is that this limits the use of the directive to a single instance per scope.Directive: scope: {title: '=title'}
HTML: <title><page-title title="{{$state.current.data.title}}"></page-title></title>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.