I am trying to pass data from one controller to another using $stateParams but getting null instead of valid data:
Please find my route code below:
.state("root.home", {
url: "/home",
abstract: true,
template: homeHtml,
controller: "HomeCtrl as ctrl",
})
.state("root.home.content", {
url: "",
params: {
userId: null,
},
views: homeView,
})
Controller A code:
$state.go("root.home.content", {userId}); // getting correct UserId
HomeCtrl code:
// In its constructure I injected the $stateParams
init() {
console.log($stateParams); // getting undefined here
if ($stateParams && $stateParams.userId) {
this.loadUser($stateParams.userId);
}
}
Pass your parameter as below
$state.go("root.home.content", {'userId': userId});
//This userId should be a valid variable inside your Controller A
And also you should edit your router as below,
.state("root.home.content", {
url: "/:userId",
params: {
userId: null,
},
views: homeView,
})
Otherwise it will not show in the url & cannot access from $stateParams
I fixed this by adding params to parent root instead of child. The correct code is:
.state("root.home", {
url: "/home",
params: {
userId: null,
},
abstract: true,
template: homeHtml,
controller: "HomeCtrl as ctrl",
})
.state("root.home.content", {
url: "",
views: homeView,
})
Related
AngularJS 1.5, using ui-router and components.
How do I pass a parameter inside a component using the ui-sref directive?
header.html:
<a ui-sref="dashboard({contentType: 'company'})">Company</a>
app.js:
.state('dashboard', {
url: "/dashboard",
component: "dashboard",
resolve: {
}
})
dashboard-component.js:
angular.module('myModule').component('dashboard', {
templateUrl: '/views/admin/dashboard.html',
controller: DashboardController,
binding: {
contentType: '<' // This is not working...
}
});
dashboard.html: (Expects to see contentType in here - but No...)
contentType: {{$ctrl.contentType}}
You need to tell your state that it could be called with some params. There are two ways you can have params. Here's a simple explanation:
Params that are part of URL
.state('dashboard', {
url: "/dashboard/:contentType",
component: "dashboard",
resolve: {
...
}
})
Params that are not part of URL
.state('dashboard', {
url: "/dashboard",
params: {contentType: null},
component: "dashboard",
resolve: {
...
}
})
EDIT: If you see, In the plunker I provided in comments, they are not directly trying to use the param value in controller, but they are using it to get something resolved.
Now, coming to your problem's solution,
One way is, you can inject $stateParams in controller and use $stateParams.tester.
Or, if you want, you can also use resolve to directly get the passed value, like:
$stateProvider.state('userlist', {
url: '/users',
params: {
tester: null
},
component: 'users',
resolve: {
tester: function($stateParams) {
return $stateParams.tester;
}
}
});
second example plunker
Add url param contentType in the state
.state('dashboard', {
url: "/dashboard/:contentType",
component: "dashboard",
resolve: {
}
})
I have my state configurations defined as below:
$stateProvider
.state('parentState', {
abstract: true,
url: '/:tenantId/',
param: {
tenantId: {
array: false
}
},
views: {
'header#': {
templateUrl: 'home/header.html',
controller: 'Header as vm'
},
'footer#': {
templateUrl: 'home/footer.html',
controller: 'FooterCtrl as vm'
}
},
resolve: userResolve,
data: {
private: true
}
})
//...4-5 other child states, then a state to handle unknown urls
.state('parentState.otherwise', {
views: {
'#': {
templateUrl: 'home/404/pageNotFound.html',
controller: 'PageNotFoundCtrl as vm'
}
}
});
$urlRouterProvider.otherwise(function ($injector) {
$injector.get('$state').go('parentState.otherwise', {}, {
location: false
});
});
Now, when an invalid URL is entered, parentState.otherwise state loads correctly, and parentState param, i.e. tenantId, is also correctly filled.
However, on page reload(refresh, Ctrl + R) with same invalid URL, parentState.otherwise state loads, but the problem is parentState param, i.e. tenantId is coming as empty string("").
Somehow, with location: false, the parent state, i.e. parentState in this case, was not picking up tenantId param from the URL on page refresh. So, if we explicitly pass tenantId param to child state, i.e. parentState.otherwise while opening it, everything works perfectly even on page refresh:
$urlRouterProvider.otherwise(function ($injector) {
$injector.get('$state').go('parentState.otherwise', {
tenantId: 'someTenantId'
}, {
location: false
});
});
controllerA from state A
$state.go('account.accountRegister', {accountType: $stateParams.accountType, acName: acName})
State defined in app.js
.state('account.accountRegister', {
url: '/:accountType/register',
params: {accountType, acName},
views: {
'mainView#':{
templateUrl: 'app/views/registration.html',
controller: 'registrationController'
}
}
})
controllerB from state B
console.log($stateParams.acName); // is getting undefined
How to use acName in the controller without showing in the url part of the state?
I came up with a solution
.state('account.accountRegister', {
url: '/:accountType/register',
params: {
acName: {
value: 'defaultValue',
squash: false
}
},
views: {
'mainView#':{
templateUrl: 'app/views/registration.html',
controller: 'registrationController'
}
}
})
For more info on squash property of the params object:
https://ui-router.github.io/docs/0.3.1/#/api/ui.router.state.$stateProvider
I have a state definition like this:
$stateProvider.state('password', {
url: '/password',
templateUrl: 'password.html',
controller: 'PasswordController',
controllerAs: 'ctrl',
params: {
accountNumber: {
value: null,
squash: true
}
},
});
I need to reference this state with its href rather than using ui-serif directive, How can I set params.accountNumber inside href?
This doesn't work:
$state.href('password', {accountNumber: $scope.accountNumber})
When I change this line url: '/password', to ` url: '/password?accoutNumber', and remove this part
params: {
accountNumber: {
value: null,
squash: true
}
},
$state.href works just fine.
To be able to generate URL with $state.href and pass parameter...
such parameter must be part of url definition
declaring it just in params: {} will result in href - not containing it, not passing it
there is adjusted state definition:
.state('password', {
url: '/password/:accountNumber',
templateUrl: 'password.html',
controller: 'PasswordController',
controllerAs: 'ctrl',
params: {
accountNumber: {
value: null,
squash: true
},
},
});
There is a working plunker
ORIGINAL part, related to typo
The $state.href() call seems to be ok... just a state definition could be wrong:
$stateProvider.state('password', {
//Url: '/password',
url: '/password',
...
The url setting is case sensitive. See state.href doc here:
href(stateOrName, params, options)
I am new to angular,i need know how to call function next to the roles instead of [] need to call function , in the below example:-
state('signin', {
parent: 'site',
url: '/signin',
data: {
roles: [] //Here i need to call function Becuase i need
assign values like this roles: ['dev','Admin']
(need to know how to call function here)
},
views: {
'': { templateUrl: '/signin.html' },
'content#': {
templateUrl: '/index.html',
controller: 'SigninCtrl'
}
}
})
If , i am trying with resoleve like below example:-
.state('signin', {
parent: 'site',
url: '/signin',
views: {
'': { templateUrl: '/signin.html' },
'content#': {
templateUrl: '/index.html',
controller: 'SigninCtrl'
}
},
resolve: {
TrackerApp: function ($q) {
var defer = $q.defer();
roles: Loadrole()
defer.resolve();
return defer.promise();
}
}
})
Getting Error like:-
TypeError: Cannot read property 'roles' of undefined
if am putting roles inside resolve getting above error
Your resolve method must be like this:
resolve: {
"trackerApp" : "TrackerApp",
"roles" : trackerApp.getRoles();
}
Move the data fetching part to service method like getRoles(). Assign it to roles property which will be available in your controller scope.