.state('app.match.indicator.speciality',{
url: '/speciality/:jobId?',
views: {
'sidebar#app.match.indicator':{
templateUrl: ENVApp + '/views/match/match.roleProfileSideBar.html?' + cacheVersion,
},
'createRoles#app.match.indicator': {
templateUrl: ENVApp + '/views/match/match.page2.html?' + cacheVersion
}
},
controller: 'RoleProfileCreateSpecialtyController'
})
That's what I have as a state definition, however my RoleProfileCreateSpecialtyController doesn't get loaded for some reason. I know this because I threw an alert in there that never happens.
What am I doing wrong?
This also fails:
.state('app.match.indicator.speciality',{
url: '/speciality/:jobId?',
views: {
'sidebar#app.match.indicator':{
templateUrl: ENVApp + '/views/match/match.roleProfileSideBar.html?' + cacheVersion,
},
'createRoles#app.match.indicator': {
templateUrl: ENVApp + '/views/match/match.page2.html?' + cacheVersion
}
},
// controller: 'RoleProfileCreateSpecialityController'
controller: function() {
alert('fd')
}
})
When defining multiple views in a state, you cannot define a single controller (see https://stackoverflow.com/a/33139917/3153169 for reference).
To fix this, you can just define the controller for the multiple views:
.state('app.match.indicator.speciality',{
url: '/speciality/:jobId?',
views: {
'sidebar#app.match.indicator':{
templateUrl: ENVApp + '/views/match/match.roleProfileSideBar.html?' + cacheVersion,
controller: 'RoleProfileCreateSpecialtyController'
},
'createRoles#app.match.indicator': {
templateUrl: ENVApp + '/views/match/match.page2.html?' + cacheVersion,
controller: 'RoleProfileCreateSpecialtyController'
}
}
})
Related
I have simple hierarchical state:
angular
.module('App.Module.Suppliers', [])
.config(function($stateProvider) {
return $stateProvider
.state('suppliers', {
url: '/suppliers',
views: {
main: {
templateUrl: 'views/layouts/wrapper.html'
}
}
})
.state('suppliers.edit', {
url: '/:id',
views: {
entity_view: {
templateUrl: 'views/layouts/foo.html'
}
}
})
.state('suppliers.edit.details', {
url: '/edit',
views: {
entity_sub_view: {
controller: function () {
this.foo = {bar: "TEST HEADER"};
},
controllerAs: 'vm',
templateUrl: 'views/layouts/main.html'
}
}
});
});
main and entity_view views are generic for all entities and only entity_sub_view changes with core information.
Now in entity_view I want to use some value like <h2>{{vm.foo.bar}}</h2> but it seems that I can't access vm inside these parent states.
Is there a way to pass this and other parameters to parent states to use?
So I found solution that fits my need. Basically you can set controllerAs to top-most state and access it via $scope:
angular
.module('App.Module.Suppliers', [])
.config(function($stateProvider) {
return $stateProvider
.state('suppliers', {
url: '/suppliers',
views: {
main: {
templateUrl: 'views/layouts/wrapper.html'
controller: function () {
this.foo = null;
}
controllerAs: 'mainCtrl'
}
}
})
.state('suppliers.edit', {
url: '/:id',
views: {
entity_view: {
templateUrl: 'views/layouts/foo.html'
}
}
})
.state('suppliers.edit.details', {
url: '/edit',
views: {
entity_sub_view: {
controller: function () {
this.foo = {bar: "TEST HEADER"};
},
controllerAs: 'vm',
templateUrl: 'views/layouts/main.html'
}
}
});
});
And in some controller do
this.$scope.mainCtrl.foo = {bar: "TEST HEADER"};
In view
{{mainCtrl.foo.bar}}
I'm trying to make main.marketing-groups.detail a nested state of main.marketing-groups however when I'm calling $state.go('main.marketing-groups.detail'); all I am getting is the url change to .../marketing-groups/detail but the HTML persists from the parent. Put some debug console.log into the marketingGroupsDetailController but it looks like it's not loaded. Both controllers do exist in index.html and are properly loaded.
.state('main.marketing-groups', {
url: '/marketing-groups',
views: {
'content': {
templateUrl: 'app/modules/marketing/groups/marketing-groups.tpl.html',
controller: 'marketingGroupsController as vm'
},
'right-drawer#main': {}
}
})
.state('main.marketing-groups.detail', {
url: '/detail',
views: {
'content': {
templateUrl: 'app/modules/marketing/groups/detail/marketing-groups-detail.tpl.html',
controller: 'marketingGroupsDetailController as vm'
},
'right-drawer#main': {}
}
})
What might wrong with it as I'm changing the code bit by bit but nothing works. I am trying to avoid using ui-view this time.
No console.log errors either.
I've made it work with this approach. If you've got something better, please let me know.
.state('main.marketing', {
url: '/marketing',
views: {
'content': {
templateUrl: 'app/modules/marketing/marketing.tpl.html',
controller: 'marketingController as vm'
},
'right-drawer#main': {}
}
})
.state('main.marketing.groups', {
url: '/groups',
views: {
'marketing#main.marketing': {
templateUrl: 'app/modules/marketing/groups/marketing-groups.tpl.html',
controller: 'marketingGroupsController as vm'
},
'right-drawer#main': {}
}
})
.state('main.marketing.groups.detail', {
url: '/detail',
views: {
'marketing#main.marketing': {
templateUrl: 'app/modules/marketing/groups/detail/marketing-groups-detail.tpl.html',
controller: 'marketingGroupsDetailController as vm'
},
'right-drawer#main': {}
}
})
marketing.tpl.html
<div ui-view="marketing"></div>
I am new to angularjs and what I need is to build a dynamic routing mechanism in angular UI router. I have three modules like docs,tasks,dashboard and have various views within each module. Please have a look on what I have tried and suggest a solution.
app.js
var app= angular.module('myApp', ['ui.router']);
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home.documentTree', {
url: '/documentTree',
views: {
'main' :{
templateUrl: "app/documents/views/documentTree.html",
controller: 'documentCtrl',
controllerAs: 'documentCtrl'
}
}
})
.state('home.documents', {
url: '/documents',
views: {
'main' :{
templateUrl: "app/documents/views/documentList.html",
controller: 'documentCtrl',
controllerAs: 'documentCtrl'
}
}
})
.state('home.documentDetails', {
url: '/documentDetails',
views: {
'main' :{
templateUrl: "app/documents/views/documentDetails.html",
controller: 'documentCtrl',
controllerAs: 'documentCtrl'
}
}
})
$urlRouterProvider.otherwise('login');
});
My html page snippet is as follows:
<a ui-sref="home.documentTree">Document Tree</a>
<a ui-sref="home.documents">Document Lists</a>
<a ui-sref="home.documentDetails">Document Deatils</a>
I have to generalize the above three routes for documents into one with dynamic parameters.
For doing this I tried the following :
<a ui-sref="home.:documents.:documentTree">Document Tree</a>
.state('home.:folder.:action', {
url: 'home/:folder/:action',
templateUrl: ['$stateParams', function ($stateParams) {
return '/app/'+ $stateParams.folder+'/' + $stateParams.action + '.html';
}],
controller: 'documentCtrl',
controllerAs: 'documentCtrl',
})
But not seems to be working fine. Please suggest your thoughts.
At last I got the solution !
Route:
.state('home.documents', {
url: '/:folder/:action',
views: {
'main' :{
templateUrl: function($stateParams) {
return 'app/' + $stateParams.folder + '/views/' + $stateParams.action + '.html';
},
controller: 'documentCtrl',
controllerAs: 'documentCtrl'
}
}
})
Html Code :
<a ui-sref="home.documents({folder:'documents',action:'documentTree'})">Document tree</a>
Just try .
This is part of my state provider:
$stateProvider.state('root', {
url: '',
abstract: true,
templateUrl: viewsRoot + "layout.html",
controller: 'LayoutController',
views: {
'container': {
templateUrl: viewsRoot + "container.html",
},
'sidebar': {
templateUrl: viewsRoot + "sidebar.html",
controller: 'SidebarController'
}
}
})
.state('layout.sidebar', {
abstract: true,
templateUrl: viewsRoot + "sidebar.html",
controller: 'SidebarController'
})
.state('layout.container', {
abstract: true,
templateUrl: viewsRoot + "container.html",
// controller: 'ObjectDetailsController'
})
.state('root.object-details', {
url:'object-details/:objectId',
templateUrl: viewsRoot + "object-details.html",
controller: 'ObjectDetailsController',
Some content on sidebar should change depending on objectId. I can access $stateParams.objectId in ObjectDetailsController but I would like to access them in sidebar controller. Maybe pass them to parent, and then parent should pass value to sidebar.
Did you try to pass the data via the params options in $stateProvider?
The API can be found here.
So your code can look like this:
.state('layout.sidebar', {
abstract: true,
templateUrl: viewsRoot + "sidebar.html",
controller: 'SidebarController',
params: {id: 'value'}
})
You can pass the param inside the view:
<a ui-sref="layout.sidebar({id: 'object.Id'})></a>
I'm creating states via ui-router, and attaching them to the same controller. (although obviously different instances of that controllers are initialized)
Inside of that controller, I'd like to know the name of the template it was initialized for.
My idea was to somehow pass to that controller properties in the stateProvider (ui-sref doesn't solve opening the browser with a deep link), but from my searches so far it appears it can't be done.
I can't simply check the name of the current state, since I'm working with multiple views.
I'm working with the same controller for multiple states and views, the controller can act accordingly as soon as he can know the name of the template he's attached to.
Here's how I create my states and views:
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
var controller = 'textFile';
var base = 'templates';
var views = ['home', 'about'];
for (var i = 0; i < views.length; i++)
{
var view = views[i];
$stateProvider.state(view, {
url: '/' + view,
views: {
'header': {
templateUrl: base + '/header.html',
controller: controller
},
'page': {
templateUrl: base + '/' + view + '.html',
controller: controller
},
'footer': {
templateUrl: base + '/footer.html',
controller: controller
}
}
});
}
}]);
I need to be able to know in textFile for instance if it's attached to header.html, footer.html, etc...
Why don't you use a resolve, so that you can access the unique data for each controller instance. For example:
$stateProvider.state(view, {
url: '/' + view,
views: {
'header': {
templateUrl: base + '/header.html',
controller: 'textFile',
resolve: {
viewName: function() { return 'header'; }
}
},
'page': {
templateUrl: base + '/' + view + '.html',
controller: 'textFile',
resolve: {
viewName: function() { return 'page'; }
}
},
'footer': {
templateUrl: base + '/footer.html',
controller: 'textFile',
resolve: {
viewName: function() { return 'footer'; }
}
}
}
});
Then you can access the value in your controller:
.controller('textFile', function($scope, viewName){
console.log(viewName);
});