I send parameter using state.go like:
$state.go("root.detalleregistros", {tipo: "edicion", catalogoid: $scope.catalogo
});
Into controller I want to receive parameter I use:
function detalleRegistrosCtrl($scope, apiService, notificationService, $rootScope, $location, $stateParams, $http, $state) {
$scope.catalogoid = $stateParams.catalogoid;
And my state of controller I want to receive parameter:
.state('root.detalleregistros', {
url: "detalleRegistros.html",
templateUrl: "../SPA/administrador/catalogos/detalleRegistros.html",
controller: "detalleRegistrosCtrl",
authenticate: true
})
Problem is I don´t receive params into $scope.catalogoid = $stateParams.catalogoid; I always getting undefined, can anyone help me there please?
In your state definition you need to specify there's a param for that route.
.state('root.detalleregistros', {
url: "detalleRegistros/:tipo/:catalogoid",
//rest of your code
Or as Alon pointed out, you can omit them from the url and use params: {
.state('root.detalleregistros', {
url: "detalleRegistros",
params: {
tipo: null,
catalogoid: null
},
Related
I want to send a parameter from app.run to my loginController. Because, I call a state.go() from the $rootScope.$on() defined inside the app.run.
app.run('$rootScope', '$state', '$stateParams',function($rootScope, $state, $stateParams(){
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
$rootScope.$on('unauthorized_access', function (event, args) {
$state.go("page.login", {'error': args.error,'msg': args.msg});
});
}]);
I have
app.config(['$stateProvider','$urlRouterProvider',function($stateProvider, $urlRouterProvider, $httpProvider){
$urlRouterProvider.otherwise('/');
$stateProvider
// some parts omitted...
.state('page.login', {
url: '/login',
views: {
'page': {
templateUrl: 'app/landingPage/login.html',
controller: 'loginController',
params: {obj : {error : null, message: null} }
}
}
});
}]);
and I want to pass parameters to the loginController from app.run, through $state.go() during transition.
$state.go("page.login", {'error': err,'message': msg});
and in my controller, this is how I am trying to receive the params...
app.controller('loginController',['$scope', '$state', '$stateParams', function($scope, $state, $stateParams){
console.log($stateParams.obj);
}]);
I do not want to change the url to >> url: '/login/:params' etc. in stateProvider
I referenced this page : stackoverflow example
but,was not helpful. Any help is appreciated. Apologies for my poor communication.
After a long research, I ended up with weird solution. I still doubt, whether this is even a solution. However, it does work for me.... I made a hack of ui.router LOL ....
I am using Angular ui-router version v0.2.18. and there at line no. 3160, they have put a line of code like :
// Store the hash param for later (since it will be stripped out by various methods)
var hash = toParams['#'];
and in line no. 3223 they have
if (shouldSkipReload(to, toParams, from, fromParams, locals, options)) {
if (hash) toParams['#'] = hash;
So, I thought of passing my object with a '#' key like this
.state('page.login', {
url: '/login',
views: {
'body#page': {
templateUrl: 'app/landingPage/login.html',
controller: 'loginController',
params: {'#' : null},
}
},
authenticate: false
});
and like this
$rootScope.$on('unauthorized_access', function (event, args) {
$state.go("page.login", {'#' : {'error': args.error,'msg': args.msg}});
});
and surprise, it worked.....
I got the object logged in console : console.log($stateParams['#']);
I know the solution is cunning[udayip as in malayalam]... but then it worked for me... I will not mark this as an answer. So, I request some angular experts to provide a real solution. If some experts say, this can be a solution, I will mark this as the answer.
Can someone explain how to use parameters sent with $state.go? In CreatePollController I create a poll which I send to the state add_data_poll (AddDataPollController), but I really don't know how to access this parameter to display it in the view or use it in the controller (I tried to see the response with console.log($scope.response), but it doesn't work), can anyone explain me?
angular.module('estudios')
.controller('CreatePollController', ['$scope', 'Restangular', '$state',
function($scope, Restangular, $state) {
$scope.addPoll = function() {
if ($scope.allow_anonymous_answer == null)
$scope.allow_anonymous_answer = false
var poll = {title: $scope.title, description: $scope.description, allow_anonymous_answer: $scope.allow_anonymous_answer, initial_message: $scope.initial_message, final_message: $scope.final_message};
Restangular.all('polls').post(poll).then(function(response) {
$state.go('add_data_poll', response);
});
};
}])
.controller('AddDataPollController', ['$scope', 'Restangular',
function($scope, Restangular) {
}]);
And these are the corresponding states.
.state('create_poll', {
url: '/create_poll',
parent: 'home',
templateUrl: 'poll/create_poll.html',
controller: 'CreatePollController'
})
.state('add_data_poll', {
url: '/create_poll/add_data_poll',
parent: 'home',
templateUrl: 'poll/add_data_poll.html',
controller: 'AddDataPollController'
You need to have either params defined in your state or query params defined in your state url.
Example for state params:
.state('add_data_poll', {
url: '/create_poll/add_data_poll',
params: {
// define object with parameters that you want to pass
// Example:
id: 1 // 1 is the default parameter if no id is passed
}
parent: 'home',
templateUrl: 'poll/add_data_poll.html',
controller: 'AddDataPollController'
This way you can send parameters but they won't be available in the query string and upon refresh they will be lost.
Example for defining query parameters:
.state('add_data_poll', {
url: '/create_poll/add_data_poll?someParameter&anotherOne',
parent: 'home',
templateUrl: 'poll/add_data_poll.html',
controller: 'AddDataPollController'
someParameter and anotherOne will be available if you pass them from the incoming state.
When passing parameters you should define what parameters you are passing.
$state.go('some.route', {id: 2, someParam: 'coolParam');
And then you can access them with $stateParams in the controller. But first you need to inject it.
myApp.controller('myCtrl', function($stateParams) {
console.log($stateParams);
});
It is not good idea to pass the whole response from an API. Better will be if you choose just the stuff you need from the response and build your state around them.
Read more about ui-router state params HERE
I'm trying to implement a forgot password flow in my application that collects some information from the user and passes it through states.
After the user submits their employee ID and where they want a reset code sent to (email or phone), I send both of those to the token state:
$state.go("^.token", { employeeId: forgot.employeeid, resetType: forgot.resetType });
My router is pretty straightforward:
$stateProvider.state("authentication.forgot", {
url: "/login/forgot",
templateUrl: "partials/authentication/forgot.html",
controller: "ForgotController as forgot",
onEnter: function () { $(document).foundation(); }
});
$stateProvider.state("authentication.token", {
url: "/login/token",
templateUrl: "partials/authentication/token.html",
controller: "TokenController as token",
onEnter: function () { $(document).foundation(); }
});
And here is my token controller:
app.controller("TokenController", function ($state, $stateParams, $timeout, Authentication) {
console.log($stateParams);
});
In my token controller, $stateParams ends up being an empty object.
You are not specifying any parameter in the $stateProvider definition, put a url parameter or define the params parameter in the $stateProvider definition.
url: "/login/token",
params: { object: {} },
templateUrl: "partials/authentication/token.html",
Note than {} is the default value for object, in case no params are specified in the state transition, and you'll be able to access this via $sateParams.object
You have to declare the params that you are trying to access in the state declaration.
$stateProvider.state("authentication.token", {
url: "/login/token?employeeId:[a-zA-Z0-9]*&resetType:[A-Z]",
templateUrl: "partials/authentication/token.html",
controller: "TokenController as token",
onEnter: function () { $(document).foundation(); }
});
You would then be able to access these in your controller via $stateParams.
I can't retrieve parameters passed from ui-router in Ionic.
Parameters passed into the Controller are undefined
This is my state code:
.state('app.dayliston', {
cache: false,
url: '/myurl',
views: {
'mainContent': {
templateUrl: 'calendar/daylist.html',
controller: 'MyCtrl',
params : { 'mode':'online'}
}
}
})
and here is My Controller code:
.controller('MyCtrl', function($scope,$state, $stateParams,CalendarFactory,FBFactory, $ionicHistory,$ionicScrollDelegate,$ionicModal,$ionicPopup, $timeout) {
console.log('MyCtrl')
console.log('mode'+$stateParams.mode) // mode is undefined
....
})
I'm using 1.6.1. Is there anything wrong with my code?
As I can see in your code, you dont need to use $stateParams because you don't get the "mode" parameter from the URL.
I think attached data in state will be a better choice (Docs):
.state('app.dayliston', {
cache: false,
url: '/myurl',
data:{
mode: 'online'
},
views: {
'mainContent': {
templateUrl: 'calendar/daylist.html',
controller: 'MyCtrl'
}
}
})
Then you can get the data stored in state like this:
.controller('MyCtrl', function($scope, $state, $stateParams, CalendarFactory, FBFactory, $ionicHistory, $ionicScrollDelegate, $ionicModal, $ionicPopup, $timeout) {
console.log('MyCtrl')
console.log('mode'+$state.current.data.mode) // "online"
})
MyCtrl is the actual name of your controller. It's not a parameter that's passed to the controller per se.
Route:
.state('app.dayliston', {
cache: false,
url: '/myurl/:mode',
views: {
'mainContent': {
templateUrl: 'calendar/daylist.html',
controller: 'MyCtrl'
}
}
})
Check URL Routing Query Parameters doc
Link from view:
<a ui-sref="app.dayliston({mode: 'online'});">Go to dayliston</a>
Go to state/route from controller:
$state.go('app.dayliston', {mode: 'online'});
you are passing the $stateParams incorrectly
https://github.com/angular-ui/ui-router/wiki/URL-Routing#stateparams-service
The should be on the url or you can pass data in using the resolve map on the state.
https://github.com/angular-ui/ui-router/wiki#resolve
also passing in custom data might be a better approach? Hard to tell from the code sample you provided
I am in the process of converting my current angular project to use ui-router and I am a little confused. The documentation states I add my controller as such:
$stateProvider.state('contacts.detail', {
url: '/contacts/:contactId',
controller: function($stateParams){
$stateParams.contactId //*** Exists! ***//
}
})
I have defined my old controller in this manner:
xap.controller('DemoCtrl', [$scope, function ($scope, demoService) {
})
where xap is defined as:
var xap = angular.module({ .... })
What is the correct integration method?
Thanks
You can refer to a pre-registered controller by name:
$stateProvider.state('contacts.detail', {
url: '/contacts/:contactId',
controller: 'DemoCtrl'
});
You can add the $stateParams dependency to your controller to access parameters:
xap.controller('DemoCtrl', [
'$scope',
'$stateParams',
'demoService',
function ($scope, $stateParams, demoService) {
$stateParams.contactId //*** Exists! ***//
}
]);
But you can also inline your controllers and therefore not have to come up with unique names for each controller for every state:
$stateProvider.state('contacts.detail', {
url: '/contacts/:contactId',
controller: [
'$scope',
'$stateParams',
'demoService',
function ($scope, $stateParams, demoService) {
$stateParams.contactId //*** Exists! ***//
}
]
});
The controller in the state is not a resolve field.
In the state, you have to put only controller name because when you declare it, it's "injected" into your angular module.
So, you have to put controller name like this :
$stateProvider.state('contacts.detail', {
url: '/contacts/:contactId',
controller: 'ContactsCtrl'
});
If you want to inject some variable, you can add an object in the state like this :
$stateProvider.state('contacts.detail', {
url: '/contacts/:contactId',
controller: 'ContactsCtrl',
myVar: function(...){
return '...';
}
});
So, if you put a function, it's for a resolve field and not for controllers... You can implement it into state but it's better to do it outside state declaration.