I have these routes defined:
.state('sport',
url: '/sport'
templateUrl: '/templates/sport'
controller: 'SportCtrl'
)
.state('sport.selected'
url: '/:sport'
templateUrl: '/templates/sport'
controller: 'SportCtrl'
)
And I have this controller trying to use the :sport param given by sport.selected state.
angular.module('myApp')
.controller('SportCtrl', ['$scope', 'ParseService',
'$stateParams', function ($scope, ParseService, $stateParams) {
var sportURL = $stateParams.sport;
...
});
For some reason, it returns undefined when I call $stateParams.sport in the controller, even though I think I defined it in the routes.
Why is this the case?
Thanks for your help!
When you access the URL /sport/12, the SportCtrl will be instantiated twice: once for the state sport, and once for the state sport.selected. And for the first state, there is no parameter associated with the state, so $stateParams.sport is undefined.
Note that it's quite strange to use the same template for a state and a sub-state. You'll have the template embedded inside the ui-view div of the same template.
Related
I want to get the value of one of the properties in the $stateParams object in my controller. I seem to be able to get the $stateParams object as a whole but I can't get a specific property.
$rootScope.params = $stateParams; // this gets me the object
$rootScope.myVar = $stateParams.fooParam + ' some msg'; // this gets me undefined
So this is how I setup my $stateProvider...
$stateProvider
.state('parent', {
url: "/parent",
templateUrl: 'tpl.html',
params: {
fooParam: 'foo defult',
barParam: 'bar defult'
},
controller: 'ParentCtrl'
})
And then in my html ui-sref route, I pass some stuff to the param.
<a ui-sref="parent({
fooParam:'foo parent',
barParam:'bar parent'
})">parent</a>
Then in my controller I want to access those params. Here is where Is truggle to access members of the $stateParams object.
$rootScope.myVar = $stateParams.fooParam + ' some msg';
In my HTML if I call {{myVar}}, I just get "undefined some msg"
Basically in this particular example I want to get the value of the fooParam in my controller. I don't understand how to do that.
Here's a Plunker of the example of my issue:
https://plnkr.co/edit/dXTgKMpBTHiv2Bt5nFxC?p=preview
Actually, I was wrong. You do need to include params in the url as below:
$stateProvider
.state('parent', {
url: "/parent/:fooParam/:barParam",
params: {
fooParam: 'foo defult',
barParam: 'bar defult'
},
templateUrl: 'tpl.html',
controller: 'ParentCtrl'
})
But the other issue is that you need to access $stateParams from the controller registered for that state, which is listed in the gotchas section of the documentation.
See updated plunker showing myVar from $stateParams injected in controller (works fine) and MyVar2 from $stateParams injected in app.run() function (doesn't work).
You can inject $stateParams directly into controller. Change your controller as below.
.controller('ParentCtrl', ['$scope','$stateParams', function($scope,$stateParams)
Here is the Plunker
https://plnkr.co/edit/PVXGjFLMVQdvxUHp1rgs?p=preview
The problem I'm having here is not being able to find the right question to ask.
I'd like to use a single partial and populate it with different data based on a url. The url would look something like this
localhost:8080/#/users/USER_ID
Where users directs to a user profile partial, and corresponding controller, and USER_ID would be sent in to an HTTP request to retrieve user data that would then populate the user profile partial.
Any direction in solving this is greatly appreciated.
If you are using ui-router which I highly recommend:
$stateProvider
.state('users', {
url:'/users/:userId',
templateUrl: 'user.html',
controller:'UserCtrl'
})
You can then access the userId in your controller:
App.controller('UserCtrl', ['$scope', '$stateParams', '$state', 'User', function($scope, $stateParams, $state, User) {
'use strict';
/* controller code */
var req = User.$find($stateParams.userId);
}]);
I am also using angular-rest-mod to make HTTP calls to an api when I do User.$find(id)
I found a solution that was a lot more straight forward than I had anticipated
app.js
$routeProvider.
when('/user/:id', {
templateUrl: 'user.html',
controller: 'userController'
});
Then in the implementation of userController, $routeParams can be used to retrieve the value of id from the url.
Okay so I would probably go like this. First I would recommend Ui-Router instead of ngRoute this allows you to create your states for example
$stateProvider
// setup an abstract state for the tabs directive
.state('A', {
params: [A,B,C,D,E],
url: "/A",
templateUrl: "templates/YourView.html",
controller: "YourController"
})
.state('B', {
params: [F,G,H,I,J],
url: "/B",
templateUrl: "templates/YourView.html",
controller: "YourController"
})
Basically this says when your Url is "/A" the "YourController" is used and the YourView.html is used so If I understood correct you have 1 view where you want to show different data depending on the Url.By Injecting 'ui.router'into your module and $state into your Controller you can access $state.current.params
Example Controller
.controller('ExampleController', ['$rootScope', '$scope', '$state', function ($rootScope, $scope, $state){
//Here you get your params
//This will return you either [A,B,C,D,E] or [F,G,H,I,J] depending if Url is /A or /B
$scope.showList = $state.current.params;
//Another Possibility with this is to listen for a StateChange
$scope.$on('$stateChangeSuccess', function (ev, to, toParams, from, fromParams) {
//Here you can access all Params from the state you just left to the state you are going
});
}]);
Now you can just show this in the YourView.html like this
<div ng-repeat="item in showList">
<p>{{item}}</p>
</div>
So If your at /A the list shows A,B,C,D,E and if you are on /B it shows F,G,H,I,J
I hope this was helpful
In the route definition below if I go to #/systemadmin/edit/Testing it brings up the SystemAdminController but not the one defined in the child route I am using. I am missing something.
$stateProvider.state('systemadmin', { url: '/systemadmin', controller: 'SystemAdminController', templateUrl: 'app/templates/SystemAdmin.html?v=' + dl.buildDate })
.state('systemadmin.edituser', { url: '/edit/:selectedUser', controller: function ($scope, $stateParams) { debugger; }, templateUrl: 'app/templates/SystemAdmin.html?v=' + dl.buildDate });
A couple of things:
Your child state controller is missing a $scope, all controllers need an $scope in angular.
When you go to edituser, the systemadmin controller will also execute, as well as the edituser controller.
EDIT
Also, you need to define your parameter with curly braces in your route definitions, not with colons, that's ng-route syntax not ui.router:
{ url: '/edit/{selectedUser}' }
Another thing which is suspect you may be missing out, as I have many times, is that the view of your parent state needs to have a ui-view itself, see this working plunk.
With ui-router, it's possible to inject either $state or $stateParams into a controller to get access to parameters in the URL. However, accessing parameters through $stateParams only exposes parameters belonging to the state managed by the controller that accesses it, and its parent states, while $state.params has all parameters, including those in any child states.
Given the following code, if we directly load the URL http://path/1/paramA/paramB, this is how it goes when the controllers load:
$stateProvider.state('a', {
url: 'path/:id/:anotherParam/',
controller: 'ACtrl',
});
$stateProvider.state('a.b', {
url: '/:yetAnotherParam',
controller: 'ABCtrl',
});
module.controller('ACtrl', function($stateParams, $state) {
$state.params; // has id, anotherParam, and yetAnotherParam
$stateParams; // has id and anotherParam
}
module.controller('ABCtrl', function($stateParams, $state) {
$state.params; // has id, anotherParam, and yetAnotherParam
$stateParams; // has id, anotherParam, and yetAnotherParam
}
The question is, why the difference? And are there best practices guidelines around when and why you should use, or avoid using either of them?
The documentation reiterates your findings here: https://github.com/angular-ui/ui-router/wiki/URL-Routing#stateparams-service
If my memory serves, $stateParams was introduced later than the original $state.params, and seems to be a simple helper injector to avoid continuously writing $state.params.
I doubt there are any best practice guidelines, but context wins out for me. If you simply want access to the params received into the url, then use $stateParams. If you want to know something more complex about the state itself, use $state.
Another reason to use $state.params is for non-URL based state, which (to my mind) is woefully underdocumented and very powerful.
I just discovered this while googling about how to pass state without having to expose it in the URL and answered a question elsewhere on SO.
Basically, it allows this sort of syntax:
<a ui-sref="toState(thingy)" class="list-group-item" ng-repeat="thingy in thingies">{{ thingy.referer }}</a>
EDIT: This answer is correct for version 0.2.10. As #Alexander Vasilyev pointed out it doesn't work in version 0.2.14.
Another reason to use $state.params is when you need to extract query parameters like this:
$stateProvider.state('a', {
url: 'path/:id/:anotherParam/?yetAnotherParam',
controller: 'ACtrl',
});
module.controller('ACtrl', function($stateParams, $state) {
$state.params; // has id, anotherParam, and yetAnotherParam
$stateParams; // has id and anotherParam
}
There are many differences between these two. But while working practically I have found that using $state.params better. When you use more and more parameters this might be confusing to maintain in $stateParams. where if we use multiple params which are not URL param $state is very useful
.state('shopping-request', {
url: '/shopping-request/{cartId}',
data: {requireLogin: true},
params : {role: null},
views: {
'': {templateUrl: 'views/templates/main.tpl.html', controller: "ShoppingRequestCtrl"},
'body#shopping-request': {templateUrl: 'views/shops/shopping-request.html'},
'footer#shopping-request': {templateUrl: 'views/templates/footer.tpl.html'},
'header#shopping-request': {templateUrl: 'views/templates/header.tpl.html'}
}
})
I have a root state which resolves sth. Passing $state as a resolve parameter won't guarantee the availability for $state.params. But using $stateParams will.
var rootState = {
name: 'root',
url: '/:stubCompanyId',
abstract: true,
...
};
// case 1:
rootState.resolve = {
authInit: ['AuthenticationService', '$state', function (AuthenticationService, $state) {
console.log('rootState.resolve', $state.params);
return AuthenticationService.init($state.params);
}]
};
// output:
// rootState.resolve Object {}
// case 2:
rootState.resolve = {
authInit: ['AuthenticationService', '$stateParams', function (AuthenticationService, $stateParams) {
console.log('rootState.resolve', $stateParams);
return AuthenticationService.init($stateParams);
}]
};
// output:
// rootState.resolve Object {stubCompanyId:...}
Using "angular": "~1.4.0", "angular-ui-router": "~0.2.15"
An interesting observation I made while passing previous state params from one route to another is that $stateParams gets hoisted and overwrites the previous route's state params that were passed with the current state params, but using $state.params doesn't.
When using $stateParams:
var stateParams = {};
stateParams.nextParams = $stateParams; //{item_id:123}
stateParams.next = $state.current.name;
$state.go('app.login', stateParams);
//$stateParams.nextParams on app.login is now:
//{next:'app.details', nextParams:{next:'app.details'}}
When using $state.params:
var stateParams = {};
stateParams.nextParams = $state.params; //{item_id:123}
stateParams.next = $state.current.name;
$state.go('app.login', stateParams);
//$stateParams.nextParams on app.login is now:
//{next:'app.details', nextParams:{item_id:123}}
Here in this article is clearly explained: The $state service provides a number of useful methods for manipulating the state as well as pertinent data on the current state. The current state parameters are accessible on the $state service at the params key. The $stateParams service returns this very same object. Hence, the $stateParams service is strictly a convenience service to quickly access the params object on the $state service.
As such, no controller should ever inject both the $state service and its convenience service, $stateParams. If the $state is being injected just to access the current parameters, the controller should be rewritten to inject $stateParams instead.
Based on these set-ups (Angular UI-Router testing scope inheritance, Angular ui-router - how to access parameters in nested, named view, passed from the parent template?), I did the following (the third holds the relevant issue):
.state("patients", {
url: "/dashboard/patients",
templateUrl: 'patients/index.html',
controller: "patientCtrl"
})
.state("sharedPatients", {
url: "/dashboard/patients/shared",
templateUrl: 'patients/shared_patients.html',
controller: "patientCtrl"
})
.state('showPatient', {
url: "/dashboard/patients/:id",
templateUrl: 'patients/show.html',
controller: ("patientCtrl", ['$scope', '$stateParams', function($scope, $stateParams) {
$scope.patient_id = $stateParams.id;
}])
})
Patients and sharedPatients work without a problem. I can also go to showPatient and access the variable patient_id. However, I cannot access any of the functions or variables established in patientCtrl. Thoughts?
The controller scope inheritance has nothing to do with the state inheritance.
Your controllers only inherit from each other if their views are nested in the DOM.
Also, the syntax you're using there is misleading. controller: ("patientCtrl", [...]) will just ignore that first part. It'll only use the controller inside the array.