Angularjs pass ui-router controller $scope to data - angularjs

Question

i want to pass a pageTitle data from ui-router based on a $stateParams and then update the title of the page using a directive
ui-router example:
.state('index.something.detail', {
url: '/{type}/{else}',
views: {
'': {
templateUrl: 'tempalte.html',
controller: function($scope, $stateParams) {
if ($stateParams.type == "param") {
$scope.title = "param";
}
}
}
},
data: {
pageTitle: 'Something {{title}}', //NOT WORKING
},
ncyBreadcrumb: {
label: 'Sometgin {{title}}', //IT WORKS
parent: 'index.something'
}
})
directive example:
function pageTitle($rootScope, $timeout) {
return {
link: function(scope, element) {
var listener = function(event, toState, toParams, fromState, fromParams) {
// Default title - load on Dashboard 1
var title = 'APP';
// Create your own title pattern
if (toState.data && toState.data.pageTitle) title = 'APP | ' + toState.data.pageTitle;
$timeout(function() {
element.text(title);
});
};
$rootScope.$on('$stateChangeStart', listener);
}
}
};
angular-breadcrumb pass the data ok
Something param
but in the pageTitle directive i get
Something {{title}}
how can i pass the $scope of the ui-router state?
Thanks!

Answer 1

We cannot pass this via data setting. The reason is, that the string param in data {} is just a string, not a view template. We would need to compile it and pass a scope.
But there is a better solution. Check this working example
Let's have index.html like this:
<H1><ui-view name="title" /></H1>
<ul>
<li><a ui-sref="parent">parent</a>
<li><a ui-sref="parent.child">parent.child</a>
</ul>
<div ui-view=""></div>
And our state can now inject stuff into two locations:
.state('state name', {
...
views : {
"" : {
// default view
}
"title" : {
template : "parent is setting title inside of index.html"
}
}
})
Check this here in action
Also, observe the UI-Router default sample application (doing the same trick) here:
http://angular-ui.github.io/ui-router/sample/#/
The most important part of the code is Contact state def, there is a small snippet:
// You can have unlimited children within a state. Here is a second child
// state within the 'contacts' parent state.
.state('contacts.detail', {
...
views: {
// So this one is targeting the unnamed view within the parent state's template.
'': {
...
},
// This one is targeting the ui-view="hint" within the unnamed root, aka index.html.
// This shows off how you could populate *any* view within *any* ancestor state.
'hint#': {
template: 'This is contacts.detail populating the "hint" ui-view'
},
// This one is targeting the ui-view="menuTip" within the parent state's template.
'menuTip': {