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 would have a question concerning ui-router: when I invoke my router only with parameters all works fine.
My question now would be if it is possible to transfer also javascript- objects from my html to my router?
the invokaction of the router looks like this:
ui-sref="auth.name({parameter1: '{{parameter1}}', parameter2: '{{parameter2}}'})"
and this is my router:
function getScheduleConfirmationState() {
var state = {
name: 'auth.name',
url: '/url/:parameter1/:parameter2',
templateUrl: 'url/to/html/my.html',
controller: 'MyController',
controllerAs: 'vm',
resolve: {
myService: 'myService',
dataForController: function myFunction(myService, $stateParams) {
return myService.getDataFromBackend();
}
}
}
return state;
};
Yes you can, but you cannot supply them as parameter in the URL:
First of all you can put the object as it is into ui-sref:
ui-sref="auth.name({parameter1: parameter1, parameter2: parameter2})"
Your state would have to add one property params:
params: {
parameter1: null,
parameter2: null
}
Remove the parameters from the URL, since objects can only be transferred hidden:
url: '/url'
In the controller of the target state auth.name you would need to inject the $stateParams service. Then you can access these parameters by:
$stateParams.parameter1
$stateParams.parameter2
I hope the concept is clear enough for you. If not just let me know.
I am trying for a parent state/view to access a child state/view. I am looking for a workaround.
My state provider configuration is as follows:
.state('advertisement', {
url: '/advertisement', abstract: true, parent: 'authenticated'
})
.state('advertisement.new', {
url: '/new',
abstract: true,
views: {
'#': {
controller: 'AdvertisementSaveCtrl',
templateUrl: 'advertisement/views/advertisement.form.html'
}
}
})
.state('advertisement.new.field', {
url: '/:fieldId',
views: {
'#advertisement.new': {
templateUrl: function ($stateParams){
return 'advertisement/views/fields/advertisement.' + $stateParams.fieldId + '.html';
}
}
}
})
In my markup:
<li ui-sref-active="active" ng-class="{'active': isActive()}"><!-- not in scope! -->
<div ui-view></div><!-- this is the view targeted by advertisement.new.field -->
The advertisement.new.field state changes according to the current field (:fieldId). I have set up a number of links (located outside of my nested ui-view) that change the state by changing the :fieldId state param but obviously, the $stateParam.fieldId is undefined if it is not within the corresponding ui-view div.
To put it differently, it seems the isActive method has no access to $stateParam.fieldId...
Can anyone please provide a workaround?
In your code samples I don't see in which controller the isActive() method is defined. But it must be defined in a controller.
I assume the isActive() function is defined on a controller named MainController.
You can then inject the $state service in this controller and via the $state.params you can access the parameters of the active state even outside of the <ui-view> tag:
app.controller('MainController', function ($scope, $state) {
console.log($stateParams);
this.isActive = function() {
// access params of active state via $state.params
console.log($state.params.fieldId);
};
});
I have an issue which I will go on to explain. When using ControllerAS at the top of a html page such like this:
<div ng-controller="MyController as myControllerVM">
I can refer to things in my controller using the myControllerVM name.
Ie in my controller I set up a variable this and assign other variables to it like this:
var vm = this;
vm.number = 1;
I can then refer to this variable in the html like this:
myControllerVM.number
as long as at the top of my page I have
<div ng-controller="MyController as myControllerVM">
What I want to do is accomplish the same thing only through routing. I have tried this:
.when(myROUTE, {
templateUrl: 'template.html',
controller: 'MyController',
controllerAs: 'myControllerVM'
and assigned everything in the controller to the variable vm which points to this as before. But in my html page these values are not getting pulled through as they were when the "controller as" name as at the top of the html page, i.e. I can no longer refer to the values in the html as myControllerVM.name (the value isn't being pulled through). The reason I need it in the route is because I want to use different controllers for the one html page.
Why isn't using controllerAs in the route working.
I can't see all your code but you can find working example here
http://plnkr.co/edit/aedTeP2DbicGYwdGWKvU?p=preview
ie:
myApp.config(function($stateProvider, $urlRouterProvider) {
//
// For any unmatched url, redirect to /state1
$urlRouterProvider.otherwise("/state1");
//
// Now set up the states
$stateProvider
.state('state1', {
url: "/state1",
templateUrl: "state1.html",
controller: 'state1Ctrl',
controllerAs:'vm'
})
.state('state2', {
url: "/state2/",
templateUrl: "state2.html",
controller: 'state2Ctrl',
controllerAs:'vm'
});
});
myApp.controller('state2Ctrl', function(){
var vm = this;
vm.title= "That is my second"
});
myApp.controller('state1Ctrl', function($scope){
var vm = this;
vm.title= "fist controller";
});
You're doing everything correct with
.when(myROUTE, {
templateUrl: 'template.html',
controller: 'MyController',
controllerAs: 'myControllerVM'
I'm not sure if Angular documentation is clear enough on that, but the scope of router's current controller is ngView's scope. So you can use MyController scope variables (including the ones that use myControllerVM identifier) only in template or ngView element attributes. I guess it is the source of the problem.
I have an Angular SPA that presents a variety of recommendation lists, and a Google Map of locations, based on different cuts of some restaurant data (see m.amsterdamfoodie.nl). I want each of these lists to have their own URL. In order for Google to crawl the different lists I use <a> tags for the offcanvas navigation.
At present the <a> tag causes a view refresh, which is very noticeable with the map.
I can prevent this using ng-click and $event.preventDefault() (see code snippets below), but then I need to implement a means of updating the browser URL.
But in trying Angular's $state or the browser's history.pushstate, I end up triggering state changes and the view refresh...!
My question is therefore how can I update a model and the URL, but without refreshing the view? (See also Angular/UI-Router - How Can I Update The URL Without Refreshing Everything?)
I have experimented with a lot of approaches and currently have this html
Budget
In the controller:
this.action = ($event) ->
$event.preventDefault()
params = $event.target.href.match(/criteria\/(.*)\/(.*)$/)
# seems to cause a view refresh
# history.pushState({}, "page 2", "criteria/"+params[1]+"/"+params[2]);
# seems to cause a view refresh
# $state.transitionTo 'criteria', {criteria:params[1], q:params[2]}, {inherit:false}
updateModel(...)
And, what is I think is happening is that I am triggering the $stateProvider code:
angular.module 'afmnewApp'
.config ($stateProvider) ->
$stateProvider
.state 'main',
url: '/'
templateUrl: 'app/main/main.html'
controller: 'MainCtrl'
controllerAs: 'main'
.state 'criteria',
url: '/criteria/:criteria/:q'
templateUrl: 'app/main/main.html'
controller: 'MainCtrl'
controllerAs: 'main'
One possible clue is that with the code below if I load e.g. http://afmnew.herokuapp.com/criteria/cuisine/italian then the view refreshes as you navigate, whereas if I load http://afmnew.herokuapp.com/ there are no refreshes, but no URL updates instead. I don't understand why that is happening at all.
This is an example of the way to go if I understand correctly:
$state.go('my.state', {id:data.id}, {notify:false, reload:false});
//And to remove the id from the url:
$state.go('my.state', {id:undefined}, {notify:false, reload:false});
From user l-liava-l in the issue https://github.com/angular-ui/ui-router/issues/64
You can check the $state API here: http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$state
Based on our previous discussions, I want to give you some idea, how to use UI-Router here. I believe, I understand your challenge properly... There is a working example. If this not fully suites, please take it as some inspiration
DISCLAIMER: With a plunker, I was not able to achieve this: http://m.amsterdamfoodie.nl/, but the principle should be in that example similar
So, there is a state definition (we have only two states)
$stateProvider
.state('main', {
url: '/',
views: {
'#' : {
templateUrl: 'tpl.layout.html',
controller: 'MainCtrl',
},
'right#main' : { templateUrl: 'tpl.right.html',},
'map#main' : {
templateUrl: 'tpl.map.html',
controller: 'MapCtrl',
},
'list#main' : {
templateUrl: 'tpl.list.html',
controller: 'ListCtrl',
},
},
})
.state('main.criteria', {
url: '^/criteria/:criteria/:value',
views: {
'map' : {
templateUrl: 'tpl.map.html',
controller: 'MapCtrl',
},
'list' : {
templateUrl: 'tpl.list.html',
controller: 'ListCtrl',
},
},
})
}];
This would be our main tpl.layout.html
<div>
<section class="main">
<section class="map">
<div ui-view="map"></div>
</section>
<section class="list">
<div ui-view="list"></div>
</section>
</section>
<section class="right">
<div ui-view="right"></div>
</section>
</div>
As we can see, the main state does target these nested views of the main state: 'viewName#main', e.g. 'right#main'
Also the subview, main.criteria does inject into layout views.
Its url starts with a sign ^ (url : '^/criteria/:criteria/:value'), which allows to have / slash for main and not doubled slash for child
And also there are controllers, they are here a bit naive, but they should show, that on the background could be real data load (based on criteria).
The most important stuff here is, that the PARENT MainCtrl creates the $scope.Model = {}. This property will be (thanks to inheritance) shared among parent and children. That's why this all will work:
app.controller('MainCtrl', function($scope)
{
$scope.Model = {};
$scope.Model.data = ['Rest1', 'Rest2', 'Rest3', 'Rest4', 'Rest5'];
$scope.Model.randOrd = function (){ return (Math.round(Math.random())-0.5); };
})
.controller('ListCtrl', function($scope, $stateParams)
{
$scope.Model.list = []
$scope.Model.data
.sort( $scope.Model.randOrd )
.forEach(function(i) {$scope.Model.list.push(i + " - " + $stateParams.value || "root")})
$scope.Model.selected = $scope.Model.list[0];
$scope.Model.select = function(index){
$scope.Model.selected = $scope.Model.list[index];
}
})
This should get some idea how we can use the features provided for us by UI-Router:
Absolute Routes (^)
Scope Inheritance by View Hierarchy Only
View Names - Relative vs. Absolute Names
Check the above extract here, in the working example
Extend: new plunker here
If we do not want to have map view to be recreated, we can just omit that form the child state def:
.state('main.criteria', {
url: '^/criteria/:criteria/:value',
views: {
// 'map' : {
// templateUrl: 'tpl.map.html',
// controller: 'MapCtrl',
//},
'list' : {
templateUrl: 'tpl.list.html',
controller: 'ListCtrl',
},
},
})
Now our map VIEW will be just recieving changes in the model (could be watched) but view and controller won't be rerendered
ALSO, there is another plunker http://plnkr.co/edit/y0GzHv?p=preview which uses the controllerAs
.state('main', {
url: '/',
views: {
'#' : {
templateUrl: 'tpl.layout.html',
controller: 'MainCtrl',
controllerAs: 'main', // here
},
...
},
})
.state('main.criteria', {
url: '^/criteria/:criteria/:value',
views: {
'list' : {
templateUrl: 'tpl.list.html',
controller: 'ListCtrl',
controllerAs: 'list', // here
},
},
})
and that could be used like this:
<h4>{{main.hello()}}</h4>
<h4>{{list.hello()}}</h4>
The last plunker is here
you can use scope inheritance to update url without refreshing view
$stateProvider
.state('itemList', {
url: '/itemlist',
templateUrl: 'Scripts/app/item/ItemListTemplate.html',
controller: 'ItemListController as itemList'
//abstract: true //abstract maybe?
}).state('itemList.itemDetail', {
url: '/:itemName/:itemID',
templateUrl: 'Scripts/app/item/ItemDetailTemplate.html',
controller: 'ItemDetailController as itemDetail',
resolve: {
'CurrentItemID': ['$stateParams',function ($stateParams) {
return $stateParams['itemID'];
}]
}
})
if child view is inside parent view both controllers share same scope.
so you can place a dummy (or neccessary) ui-view inside parent view which will be populated by child view.
and insert a
$scope.loadChildData = function(itemID){..blabla..};
function in parent controller which will be called by child controller on controller load. so when a user clicks
<a ui-sref="childState({itemID: 12})">bla</a>
only child controller and child view will be refreshed. then you can call parent scope function with necessary parameters.
The short answer ended up being do not put the map inside a view that changes. The accepted answer provides a lot more detail on how to structure a page with sub-views, but the key point is not to make the map part of the view but to connect its behaviour to a view that does change and to use a Controller to update the market icons.