$stateProvider.state('search-results', {
url: '/s/:path?param1¶m2¶m3',
controller: '...Controller',
templateUrl: '....html',
reloadOnSearch:false
});
Now I want the controller not to load when there is change in the param1, param2 or param3. But I want controller to load when there is change in the path.
When I do
$state.go('search-results', {
path: "path",
param1: "param1",
param2: "param2",
param3: "param3"
})
With a new path, the controller doesn't reload. Infact the URL also deosn't change. I can get around the URL problem by using $location. But in that case also the controller is not reloaded.
Note: I found some similar questions, but since I am using $state instead of $route, my question is different.
Related
I have a stateProvider which looks like:
$stateProvider.state('test.example', {
url: '/test?param1¶m2',
templateUrl: 'test/testParam.html',
controller: 'testParamCtrl'
});
When I console log $stateParams in my controller, it runs twice. This happens only when I'm switching between tabs on my app. This problem doesn't occur if I refresh the app.
It seems as if the controller is "building" the stateParams object and instantiating the controller each time. Therefore, I'm getting some angular errors of param2 being undefined during the first instantiation. This is what the console logs look like:
Object {param1: "data1", param2: undefined} // first instantiation
Object {param1: "data1", param2: "data2"} // second instantiation
When I refresh the page, however, only one console log shows up, which is the "correct one" (i.e. param1 and param2 are both defined).
Thanks in advance!
My guess is that in 'test/testParam.html' you have ng-controller="testParamCtrl". Remove ng-controller in the template or remove the controller property in your state definition.
I think you need to change your state defination to:
$stateProvider.state('test.example', {
url: '/test/:param1/:param2',
templateUrl: 'test/testParam.html',
controller: 'testParamCtrl'
});
to pass parameters in the right way.
You need to assign parameter values
$stateProvider.state('test.example', {
url: '/test/:param1/:param2',
params: {
param1: "data1",
param2: "data2" }
templateUrl: 'test/testParam.html',
controller: 'testParamCtrl'});
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
I'm sending a variable ($stateParams) in the url, to go to another template, I wonder if there is a way to go to the previous template that I visited, obtaining prior to the url and the parameter.
for example i go to the template1 to template2
url of template1: localhost:8100/index/PARAM
url of template2: localhost:8100/index/otherTemplate
if I return to template2 to template1, this URL appear
localhost:8100/index/
i loss the parameter..
they are my states
.state('index', {
cache:false,
url: '/index/:PARAM',
templateUrl: 'templates/index.html',
controller: 'indexAppController'
})
.state('otherTemplate', {
url: '/otherTemplate',
templateUrl: 'templates/template2.html',
controller: 'templateAppController'
})
the parameter is lost when I go back to the previous template. this is my problem
Check whether your parameters are asign as routeparams,
$routeParams.parameter_name="";
Note: Don’t forget to inject $routeParam parameter in controller. Otherwise you wont be able to use it.
sampleApp.controller('indexAppController', function($scope, $routeParams) {
});
Why not add url parameter and value in local storage and use stateprovider for routing... using $state.go('state');
I have this simple state :
.state('search', {
url: '/search',
templateUrl: 'views/search.html',
controller: 'search'
})
And I would like to pass any extra unplanned parameters to the controller when using search state or /search route :
ui-sref="search({foo:1, bar:2})"
// would call '#/search?foo=1&bar2',
// match the state and pass foo and bar to the controller (through $stateParams)
When I try this, it matches the otherwise of the router instead. :(
I've read a lot of solutions that imply to declare each parameter in the state:
.state('search', {
url: '/search?param1¶m2¶m3?...',
})
But I cannot do this as far as the parameters list is not really defined and changes all the time depending on searched content.
Is there a way to achieve this ? Or am I wrong somewhere ?
Thx.
EDIT : When I try to call directly this url : #/search?foo=1, the state search matches but the foo parameter never goes to $stateParams which is empty. I don't know how to get it in.
.state('search', {
params: ['param1','param2','param3'],
templateUrl: '...',
controller: '...'
});
ui-sref="search({param1:1, param2:2})"
Credit goes to Parameters for states without URLs in ui-router for AngularJS
This question is might be similar to this but with different requirements. As I was not able to make comment (required 50 points) I am replicating the question.
I want to simply access the parameters sent from ui-sref in template inside the controller without mentioning them in state URL .
Something like using the link below for transitioning the state to home with foo and bar parameters:
<a ui-sref="home({foo: 'fooVal', bar: 'barVal'})">Go to home state with foo and bar parameters </a>
Receiving foo and bar values in a controller:
state('home', {
url: '/:foo',
views: {
'***whatIsThis***': {
templateUrl: 'home.html',
controller: 'MainRootCtrl'
},
app.controller('SomeController', function($scope, $stateParam) {
//..
var foo = $stateParam.foo; //getting fooVal
var bar = $stateParam.bar; //getting barVal
//..
});
I get undefined for $stateParam in the controller.
Could somebody help me understand how to get it done? I want to get bar as well without adding it to URL
If some of your params are not supposed to show up in the URL, you need to combine url and params:
.state('home', {
url: '/:foo',
params: {
foo: 'default value of foo',
bar: 'default value of bar'
},
...
})
and then use $stateParams properly:
.controller('SomeController', ['$scope', '$stateParams', function ($scope, $stateParams) {
// ... (use $stateParams)
}])
(see documentation).
And, if you're still stuck, please take a look at this working codepen demo.