I have a route that looks like the following:
.state('obj.subobj', {
url: '/subobjs?type',
templateUrl: '.../...layout.html'
})
The type parameter is important. If the app directs to this route without that param (i.e., /subobjs instead of /subobjs?type=...), I want to stop everything and set it to a default value before the template ever loads.
I've tried redirecting in a controller like so:
.state('obj.subobj', {
url: '/subobjs?type',
templateUrl: '.../...layout.html',
controller: function($state, $stateParams) {
if (!$stateParams.type) {
$state.go('obj.subobj', {type: 'default'});
}
}
})
This works in that it gets me to the correct page, but the template still loads the first time through when the parameter is not set.
I've also tried setting the default value in the controller above, but that doesn't seem to truly set it.
$stateParams.type = 'default'; // OR
$state.params.type = 'default';
Thoughts? Thanks for the help.
Related
I'm using angular ngRoute and have two pages index.html#/pageone and index.html#/pagetwo. In pageone there are a list of folders which are the entrances of pagetwo. By clicking one of the folders, pageone pass folder name as parameter to pagetwo, there is a datatable on pagetwo, waiting for the parameter from pageone to display relevant content.
What I've done is fetch the parameter in pagetwo's controller and append query parameters to url so that I can still get parameter when refreshing pagetwo. But it seems this is not a right way. If I redirect from pageone to pagetwo with name=1, then click browser's back button, url will change from index.html#/pagetwo?name=1 to index.html#/pagetwo, There's no way to get parameters once I refresh page now. Any solution to store parameters passed from pageone in this case?
.when('/pageone', {
templateUrl: 'pageone.html',
controller: 'pageoneController',
reloadOnSearch: false
})
.when('/pagetwo', {
templateUrl: 'pagetwo.html',
controller: 'pagetwoController',
reloadOnSearch: false
})
pagetwoController:
if(direct from pageone) {
$scope.name = someService.getName()
$location.search('name', $scope.name)
} else {
//if reload page
$scope.name = $location.search().name
}
You can define parameters in your routes using : for instance :id creates a parameter variable called id
.when('/pageone', {
templateUrl: 'pageone.html',
controller: 'pageoneController',
reloadOnSearch: false
})
.when('/pagetwo/:id', { //add the id param here.
templateUrl: 'pagetwo.html',
controller: 'pagetwoController',
reloadOnSearch: false
})
your url for pagetwo would then be something like : /pagetwo/1
in your controller on pagetwo you can then get the params via the $routeParams variable.
See this for more information
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
I have multiple routes which serves different pages like so:
$routeProvider.
when('/routeone', {
templateUrl: '/routes/one',
resolve: {}
})
.when('/routetwo', {
templateUrl: '/routes/two',
controller: 'CampaignController',
resolve: {
}
})
.when('/routethree', {
templateUrl: '/routes/three',
resolve: {}
});
Each route page has different model fields but uses one single $scope variable i.e. $scope.template so in one route/template it is:
<span>{{template.var1}}</span>
on other it is
<span>{{template.var2}}</span>
I am fetching route specific data and storing it in $scope.template, but the issue is even when it is assigned it is not showing it on UI fields which are bound.. initially my $scope.template is set to empty string.
If i set all the fields that are used in all the route template like
$scope.template = { var1 = 'var1', var2='var2'}
it works which i don't want to do but if i set it to empty and fetch route specific on route change it doesn't.. can someone plz help..
here is the plnkr
I think you need this
https://docs.angularjs.org/api/ngRoute/service/$routeParams
I'm using angular ui router / stateProvider. However I set up my url any parts after the second forward slash is ignored and it always sends to this state:
$stateProvider.state('board', {
url: "/:board",
views: {
'content': {
templateUrl: '/tmpl/board',
controller: function($scope, $stateParams, $location) {
console.log('wat')
console.log($location)
}
}
}
});
Which has only 1 forward slash. Even when I go to localhost/contacts/asdf The following state doesn't run.
$stateProvider.state('test', {
url: "/contacts/asdf",
views: {
'main': {
templateUrl: '/tmpl/contacts/asdf',
controller: function () {
console.log('this doesnt work here')
}
}
}
});
This is a console log of $location. As you can see $location only recognizes the last part of the url as the path. As far as I can tell that's wrong. It's missing the "contacts" right before it. Any url is interpreted as having only 1 part for the url and sends to the board state. How do I fix this. THanks.
Edit: found that this was caused by angular 1.1.5. Reverting back to 1.1.4 didn't have this.
This may be the cause: https://github.com/angular/angular.js/issues/2799 . Try adding a base href.
Looks like that fixed in AngularJS v1.0.7. Just tested it.