Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to pass parameters using ui-sref in ui-router to controller

I need to pass and recieve two parameters to the state I want to transit to using ui-sref of ui-router.

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:

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?

Edit:

.state('home', {   url: '/',   views: {     '': {       templateUrl: 'home.html',       controller: 'MainRootCtrl'      },      'A@home': {       templateUrl: 'a.html',       controller: 'MainCtrl'     },      'B@home': {       templateUrl: 'b.html',       controller: 'SomeController'     }   }  }); 
like image 386
skip Avatar asked Sep 03 '14 14:09

skip


People also ask

How ui sref works?

A ui-sref is a directive, and behaves similar to an html href . Instead of referencing a url like an href , it references a state. The ui-sref directive automatically builds a href attribute for you ( <a href=...> </a> ) based on your state's url.

What is UI sref active?

[uiSrefActive] : When this selector is used, the class is added when the target state or any child of the target state is active. [uiSrefActiveEq] : When this selector is used, the class is added when the target state is exactly active (the class is not added if a child of the target state is active).

What is UI in router?

UI-Router is the defacto standard for routing in AngularJS. Influenced by the core angular router $route and the Ember Router, UI-Router has become the standard choice for routing non-trivial apps in AngularJS (1. x).

What is the use of $state in AngularJS?

$stateProvider is used to define different states of one route. You can give the state a name, different controller, different view without having to use a direct href to a route. There are different methods that use the concept of $stateprovider in AngularJS.


1 Answers

I've created an example to show how to. Updated state definition would be:

  $stateProvider     .state('home', {       url: '/:foo?bar',       views: {         '': {           templateUrl: 'tpl.home.html',           controller: 'MainRootCtrl'          },         ...       } 

And this would be the controller:

.controller('MainRootCtrl', function($scope, $state, $stateParams) {     //..     var foo = $stateParams.foo; //getting fooVal     var bar = $stateParams.bar; //getting barVal     //..     $scope.state = $state.current     $scope.params = $stateParams;  }) 

What we can see is that the state home now has url defined as:

url: '/:foo?bar', 

which means, that the params in url are expected as

/fooVal?bar=barValue 

These two links will correctly pass arguments into the controller:

<a ui-sref="home({foo: 'fooVal1', bar: 'barVal1'})"> <a ui-sref="home({foo: 'fooVal2', bar: 'barVal2'})"> 

Also, the controller does consume $stateParams instead of $stateParam.

Link to doc:

  • URL Parameters

You can check it here

params : {}

There is also new, more granular setting params : {}. As we've already seen, we can declare parameters as part of url. But with params : {} configuration - we can extend this definition or even introduce paramters which are not part of the url:

.state('other', {     url: '/other/:foo?bar',     params: {          // here we define default value for foo         // we also set squash to false, to force injecting         // even the default value into url         foo: {           value: 'defaultValue',           squash: false,         },         // this parameter is now array         // we can pass more items, and expect them as []         bar : {            array : true,         },         // this param is not part of url         // it could be passed with $state.go or ui-sref          hiddenParam: 'YES',       },     ... 

Settings available for params are described in the documentation of the $stateProvider

Below is just an extract

  • value - {object|function=}: specifies the default value for this parameter. This implicitly sets this parameter as optional...
  • array - {boolean=}: (default: false) If true, the param value will be treated as an array of values.
  • squash - {bool|string=}: squash configures how a default parameter value is represented in the URL when the current parameter value is the same as the default value.

We can call these params this way:

// hidden param cannot be passed via url <a href="#/other/fooVal?bar=1&amp;bar=2"> // default foo is skipped <a ui-sref="other({bar: [4,5]})"> 

Check it in action here

like image 166
Radim Köhler Avatar answered Sep 21 '22 12:09

Radim Köhler