CODEWITHSUNDEEP
angularjsangular-ui-routerurl-parameters
24sharon
24sharon

Reputation: 1975

Angularjs ui-router add parent url parameter to current state

This is my app state

  .state('app', {
      url: "/?:site_id",
      templateUrl: "/controls/angular/templates/partial/app.html",
      abstract: true
  })
  .state('app.popup', {
    url: "popup",
    templateUrl: "/controls/angular/templates/popup.html",
    controller: 'PopupController'
  })

The app root (that config as abstract) has parameter (site_id) that I can use in all other pages in the application.

I have drop-down list that can change the site. How can I add the site url parameter to current page with all other parameters that exist

Just change the root site_id parameter.

     var oSelect =  $('#site_select_tag').select2();
        oSelect.on("change", function (e) {
       var curr_site_id = e.val;                                
       $state.go to => ?????????                               
       //scope.site_id = e.val;
       scope.onChange()(e.val);
});

Upvotes: 0

Views: 1916

Answers (3)

24sharon
24sharon

Reputation: 1975

Thanks

The solution is simple

$state.go('.', {site_id: e.val})

Keep all other parameters and set the new parameter

Upvotes: 1

Shmee007
Shmee007

Reputation: 66

If I understand you correctly your trying to manipulate the state data after it is set up in the $stateProvider. If so you should set up your own state provider like Mean.io do

// $meanStateProvider, provider to wire up $viewPathProvider to $stateProvider
angular.module('mean.system').provider('$meanState', ['$stateProvider', '$viewPathProvider', function($stateProvider,viewPathProvider){
    function MeanStateProvider() {
        this.state = function(stateName, data) {
          if (data.templateUrl) {
            data.templateUrl = $viewPathProvider.path(data.templateUrl);
          }        
          $stateProvider.state(stateName, data);        
          return this;
        };    

        this.$get = function() {
          return this;
        };
    }
    return new MeanStateProvider();
    }]);

Upvotes: 0

iH8
iH8

Reputation: 28638

You can pass options to the go method of $state:

$state.go(to [, toParams] [, options])

https://github.com/angular-ui/ui-router/wiki/Quick-Reference#stategoto--toparams--options

$state.go('myState', {'myParam': myValue});

And you can set parameters on ui-sref:

ui-sref='stateName({param: value, param: value})'

https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-sref

<a ui-sref="myState({'myParam': myValue})">myLink</a>

You can access the current state as $state.current.name and the current parameters as $state.params so what you can do is this:

var params = $state.params;
params.id = 123; // Set new ID
$state.go($state.current.name, params);

Upvotes: 0

Related Questions