Just starting out with angular/uiRouter and I have a question. I would appreciate any guidance from those with more experience on how to bind a component with a state whose parent is abstract.
Here is what I have implemented so far:
States
{
name: 'main',
url: '/main',
templateUrl: 'template/main.html',
abstract: true
}
,
{
name: 'main.data',
resolve: {
items: function(ItemsService){
return ItemsService.getPosts();
}
},
url:'',
component: 'pageData'
}
Component
app.component('pageData', {
templateUrl: 'template/pageData.html',
controllerAs: 'pageCtrl',
bindings: {
items: '<'
}
Although in theory this should work, I am facing some challenges.
I discovered that removing the parent and accessing the state directly does work, but that's not the outcome I desire:
{
name: 'data',
resolve: {
items: function(ItemsService){
return ItemsService.getPosts();
}
},
url:'/data',
component: 'pageData'
}