How to Pass Parameters Using Ui-Sref in Ui-Router to the Controller

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

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&bar=2">
// default foo is skipped
<a ui-sref="other({bar: [4,5]})">

Check it in action here

angularjs 1.5 pass a parameter to component with ui-sref

You need to tell your state that it could be called with some params. There are two ways you can have params. Here's a simple explanation:

1. Params that are part of URL

   .state('dashboard', {
     url: "/dashboard/:contentType",
     component: "dashboard",
     resolve: {
       ...
     }
   })
   

2. Params that are not part of URL

   .state('dashboard', {
     url: "/dashboard",
     params: {contentType: null},
     component: "dashboard",
     resolve: {
       ...
     }
   })
   

EDIT: If you see, In the plunker I provided in comments, they are not directly trying to use the param value in controller, but they are using it to get something resolved.

Now, coming to your problem's solution,

One way is, you can inject $stateParams in controller and use $stateParams.tester.

Or, if you want, you can also use resolve to directly get the passed value, like:

  $stateProvider.state('userlist', {
    url: '/users',
    params: {
      tester: null
    },
    component: 'users',
    resolve: {
      tester: function($stateParams) {
        return $stateParams.tester;
      }
    }
  });

second example plunker

How to pass argument to Angularjs's router-ui without showing up in URL?

Route parameters in UI Router are optional by default. For example you code (following) says that arg1 is an optional parameter. So both /my_state/:arg1 and /my_state/ will work, but not /my_state (no trailing slash). It also reveals the arg1 value in the URL.

.state('my_state', {
    url: '/my_state/:arg1',
    templateUrl: 'http://www.example.com/html/my_file.html',
    controller: 'MyCtrl'
})

You Can add another optional argument to this controller with your preferences :

.state('my_state', {
    url: '/my_state/:arg1',
    templateUrl: 'http://www.example.com/html/my_file.html',
    controller: 'MyCtrl',
    params: {
        arg2: { value: null }
    }
})

To hide parameters you have to define them in params.

Note that the squash property (inside params) configures how a default parameter value is represented in the URL when the current parameter value is the same as the default value. If squash is not set, it uses the configured default squash policy.

Working Plunker

Update

Another Working Plunker which uses $state.go('my_state', {'arg1': 'hello', 'arg2': 'world'}); inside controller.

Note that there is no functional difference between ui-sref and $state.go for Activating a state

ui-sref passing parameters to new tab

You have to pass parameter this way.

<a ui-sref="page/info({IDF: row.id})">

For more info:https://github.com/angular-ui/ui-router/wiki/URL-Routing#url-parameters

$stateProvider
  .state('home', {
      url: '/',
      templateUrl: 'views/dashboard/index.html'
  })  
  .state('page/info', {
      url: '/page/info/:IDF',
      templateUrl: 'views/page/info.html'
  })

AngularJS : Pass input parameter in URL with ui-router

You could then add new parameter in your state definition & then pass that parameter in ui-sref directive, so that will take care href url creation

ui-sref="home({foo: 'Foo,mojtaba1', bar: 'barVal1', name: name})"

How do I pass a parameter not in the URL using Angularjs ui-router and components?

I have found that the parameters are passed through the $transition$ object. This object is not passed like a regular provider to the controller though. You pass the $transition$ object in through bindings on the component. $transition$ is automatically bound as is explained here.

ui-router Config:

.state({
        name: "contacts",
        url: "/contacts",
        params: {
            param1: null
        },
        component: "contacts"
    })

Controller:

module.component("contacts", {
    bindings: { 
        $transition$: '<'
    },
    controller: {
        var $ctrl = this;

        $ctrl.$onInit = function(){
            var param1 = $ctrl.$transition$.params().param1;
        };
    }
}

HTML Link

<a ui-sref="contacts({param1:$ctrl.myParam})" ui-sref-active="active">Contacts</a>

More information on using $transition$ and $transition$.params() can be found on ui-router's Github page.

UI Router: How to pass parameters to nested views

When you have your routes set up like this:

app.config(function($stateProvider) {
  $stateProvider
    .state('home', {
      url: '/home',
      views: {
        '': {
          controller: 'HomeController',
          controllerAs: 'vm',
          templateUrl: 'home.html'
        },
        'blebleh@home': {
          controller: 'BleblehController',
          controllerAs: 'vm',
          templateUrl: 'blebleh.html'
        },
        'blablah@home': {
          controller: 'BlablahController',
          controllerAs: 'vm',
          templateUrl: 'blablah.html'
        }
      }
    })
});

and your home.html like this:

<div data-ng-repeat="widget in vm.widgets">
    <div ui-view="{{ widget.template }}"></div>
</div>

you should be able to access the ng-repeats widget object, and it's properties from within the child views via scope inheritance. So from within blebleh.html and blablah.html you can access the respective widgetIds simply using:

{{ widget.widgetId }}

This works because the scope created by each ui-view inherits the scope created by each loop of the ng-repeat (which creates a separate scope for each widget).

UPDATE

Whilst the above still stands, looking back at your question I don't think I answered it directly.

How to pass widgetId to BlablahController/BleblehController?

The answer is do the above (take advantage of scope inheritance) and sweep it off the $scope service and use it in your respective controllers e.g.:

app.controller('BleblehController', function($scope) {
  var vm = this;
  vm.myWidgetId = $scope.widget.widgetId;
});

app.controller('BlablahController', function($scope) {
  var vm = this;
  vm.myWidgetId = $scope.widget.widgetId;
});

Example Plunk

---

Related Topics