got some question for you guys.
How can i retrieve data passed as parameter and use it as object/string in my resolve so i can pass it to my controller.
here is my code(not working)
var thisState = {
name: 'category',
url: '/category/:category',
templateUrl: 'resources/templates/views/category.html',
resolve: {
category: function(params) {
return params.category;
}
},
controller: 'CategoryCtrl'
}
$stateProvider
.state(thisState);
this is how i pass param
ui-sref="category({category:'food'})
thanks in advance
You need to use $stateParams with ui-router
var thisState = {
name: 'category'
url: '/category/:category',
templateUrl: 'resources/templates/views/category.html',
resolve: {
category: ['$stateParams', function($stateParams){
return $stateParams.category;
}]
},
controller: 'CategoryCtrl'
}
$stateProvider
.state(thisState);
Related
I am on angular 1.6. Trying to override value of a ui-router state.
Initial states as follows :
$stateProvider.state('parent', {
abstract: true,
parent: 'ancestor',
url: '/parent',
data: {
authorities: [A,B]
},
views: {
'content#': {
templateUrl: 'app/scripts/myapp/module/parent.html'
}
}
})
.state('child', {
parent: 'parent',
abstract: true,
views: {
'tabs': {
templateUrl: 'app/scripts/myapp/module/submodule/child.html',
controller: 'ChildController',
controllerAs: 'childController'
}
}
})
.state('grandChild', {
parent: 'child',
url: '/{dataSource:(?:option1|option2|option3)}',
views: {
'body': {
templateUrl: 'app/scripts/myapp/module/submodule/grandchild.html',
controller: 'GrandChildController',
controllerAs: 'grandChildController'
},
},
resolve: {
groups: ['MyService', '$transition$', function (MyService, $transition$) {
var selectedSource = $transition$.params().dataSource ? $transition$.params().dataSource : 'option1';
return MyService.getGroups(selectedSource);
}]
}
})
Then in one of sub-implementation I am trying to override value of url - adding option4 for one of the state.
var states = $stateRegistry.deregister('grandChild');
$stateRegistry.register(states[0]);//There is one more child. For simplicity not showing here.
states[1].url.pattern = '/{dataSource:(?:option1|option2|option3|option4)}';
$stateRegistry.register(states[1]);
when I do following on 'grandChild'
$state.go('grandChild', {dataSource: 'option4'});
I get error as
Param values not valid for state 'grandChild'. Invalid params: [ dataSource ]
when I inspect $state
I see something weird.
$state.$current.params.datasource.type.pattern = /(?:option1|option2|option3)/
$state.$current.url.pattern = "/{dataSource:(?:option1|option2|option3|option4)}"
$state.$current.url._compiled[0] = /((?:option1|option2|option3))/
I've read many posts but none of them work:
I want to pass some data using $state.go.
this is my state :
.state('app.404', {
url: '404',
views: {
'header#': {
templateUrl: 'views/empty.html'
},
'content#': {
templateUrl: '404.html',
controller: 'fofController'
},
'footer#': {
templateUrl: 'views/empty.html'
},
params: {errorInfo: null}
}
})
this is how I pass the data :
$state.go('app.404', {errorInfo: {status: 403, message: 'unauthorised', fix: 'You have to login'}});
and this is how I try to catch the data in my controller:
.controller('fofController', ['$scope', '$state',
function ($scope, $state) {
console.log($state.params);
}])
but the answer is an empty object ({}). I also used $stateParams like below but I get the same result, an empty object:
.controller('fofController', ['$scope', '$stateParams',
function ($scope, $stateParams) {
console.log($stateParams);
}])
option -1
.state('404.contact/', {
url: '/contact/:obj',
templateUrl: "contact.html",
controller: "contactCtrl",
params: {
obj: null,
}
})
.state('404.header', {
url: '/header/:number',
templateUrl: "header.html",
controller: "headerCtrl",
params: {
obj: null
}
})
option-2
$state.go(.....
You should try this code instead
$state.transitionTo(...
option-3
Perhaps try transferring with url
$stateProvider
.state('user', {
url: '/user/:obj',
templateUrl: 'templates/user.html',
controller: 'UserCont'
})
Maybe these are the solution to the problem.
Working example with $state.go()
Could not resolve story.detail?storyId=167&pubId=84 from state search
var params = 'storyId='+$scope.stories[index].ID+'&pubId='+$scope.pubId;
$state.go('story.detail?'+params);
$stateProvider
.state('story.list', {
url: '/search?storyId&pubId',
templateUrl: 'views/search.html',
controller: 'SearchCtrl',
resolve: {
ds : ['$wakanda', function($wakanda){
return $wakanda.init();
}]
}
})
.state('story', {
url: '/story',
abstract: true,
templateUrl: 'views/story.html'
// controller: 'StoryCtrl'
})
.state('story.detail', {
url: '/story.detail?storyId&pubId',
templateUrl: 'views/story_detail.html',
controller: 'StoryDetailCtrl',
resolve: {
ds : ['$wakanda', function($wakanda){
return $wakanda.init();
}]
}
});
I've read through other similar questions and replies here.
I don't know why router could not resolve the state name story.detail?storyId=167&pubId=84 from state search.
$state.go should be configured like so:
$state.go('story.detail', {
storyId : $scope.stories[index].ID,
pubId : $scope.pubId
});
I am hitting this url
http://localhost:8001/#/verifyMail?4c4e77a2
at that time i did
console.log($stateParams);
It shows empty object
My route is
.state('mailVerification', {
url: "/verifyMail?id",
templateUrl: "app/views/common/emailVerification.html",
controller: 'accountCtrl',
data: {
authorizedRoles: [USER_ROLES.all]
}
})
Why i am not getting $stateParams.id value? Please help me.
You need to resolve the data.
.state('mailVerification', {
url: "/verifyMail?id",
templateUrl: "app/views/common/emailVerification.html",
resolve: {
id: function($stateParams){
return $stateParams.id;
}
}
controller: 'accountCtrl',
data: {
authorizedRoles: [USER_ROLES.all]
}
})
and inside the controller:
.controller('accountCtrl', ['id', '$log', function(id, $log){
$log.debug(id);
}]);
I am trying to load a get service JSON function in the main state resolve function so I can store the data to a scope variable.
The account JSON information is relevant because all sub pages are essentially dependent on the information.
--
The below code is partially working. The account resolve function is being successfully called and even the $http returns a promise (state === 0 though). The issue is when the account function resolves the state.controller is never being called.
$stateProvider
.state('app',{
url: '/',
views: {
'header': {
templateUrl: '../views/templates/partials/header.html',
},
'content': {
templateUrl: '../views/templates/partials/content.html'
},
'footer': {
templateUrl: '../views/templates/partials/footer.html',
}
},
resolve: {
account: function($timeout, accountFactory){
//Comment
return $http({method: 'GET', url: '/account.json'});
}
},
controller: ['$scope', 'account', function($scope, account){
// You can be sure that promiseObj is ready to use!
$scope.data = account;
console.log('SCOPE!!!!!');
}],
})
.state('app.accessory', {
url: 'accessory',
views: {
'content#': {
templateUrl: '../views/accessory/listing.html',
controller: 'accessoryListingCtrl',
controllerAs: 'vm'
}
}
})
}]);
Your parent state config is not correct. When using multiple named views A controller does not belong to a state but to a view, so you should move your controller statement to the specific view declaration, or all of them if you need it everywhere.
See here: https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views
$stateProvider
.state('report',{
views: {
'filters': {
templateUrl: 'report-filters.html',
controller: function($scope){ ... controller stuff just for filters view ... }
},
'tabledata': {
templateUrl: 'report-table.html',
controller: function($scope){ ... controller stuff just for tabledata view ... }
},
'graph': {
templateUrl: 'report-graph.html',
controller: function($scope){ ... controller stuff just for graph view ... }
},
}
})
I don't know why the controller does not get called. But you can start by making sure that resolve always return data.
resolve: {
account: function($timeout, accountFactory){
//Comment
return $http({method: 'GET', url: '/account.json'})
.$promise.then(
function(data) { return data; },
function(error) { return error; });
}
}