Angularjs ui-router changes state but does not update url when passing params

Question

I am using UI-Router to navigate to detailed view. It changes state correctly and passes parameters correctly, yet the url address in the browser stays unchanged. I would like to display the passed params in the url.

app.js

'use strict';

var myApp = angular.module("myApp", ['ui.router']);

myApp.config(['$stateProvider', '$urlRouterProvider','$locationProvider',
       function($stateProvider, $urlRouterProvider,$locationProvider) {


$urlRouterProvider.otherwise('/');

$stateProvider

.state('/', {
url: '/',
templateUrl: 'partials/listView.html'
})

.state('list', {
    url: '/',
    templateUrl: 'partials/listView.html'
})
.state('detail', {
    url: '/detail/:key',
    params: {
         key: { value: "" }
    },
    templateUrl: 'partials/detailView.html',
    controller: 'DetailController'
})

// use the HTML5 History API
 $locationProvider.html5Mode(true); 
 }]);

Controller function to go to the detail state:

myApp.controller('MainContr', [ '$scope', '$http', '$location', '$state',
    '$filter','$rootScope', MainContr ]);

function MainContr($scope, $http, $location, $state, $filter,$rootScope) {

$scope.goDetailView= function(key){
    console.log("trying to change url ");

  // changes state correctly, and passes params to DetailController,  
 // but does not change browser address url. 
 // How can I update the url in browser here?
    $state.go('detail', 
            {key: $scope.selectedPDFKey},
            {
                location:true
             });        
   }
}

// detail view
myApp.controller('DetailController', [ '$scope', '$stateParams'
    DetailController ]);

function PDFDetailController($scope,$state) 
{
  $scope.currentKey=$state.params.key;
}

If I remove params in $state.go('detail'), the url in browser address bar is replaced. How can I get url in browser address bar replaced as well when I pass parameters in $state.go(). Thank you.

kaplievabell · Accepted Answer · 2016-05-20 14:14:20Z

1

Issue was fixed when state was changed to use query in url as:

.state('detail', {
   url: '/detail?key',
   params: {
     key: { value: "" }
   },
   templateUrl: 'partials/detailView.html',
   controller: 'DetailController'
})

answered May 20, 2016 at 14:14

kaplievabell

8311 gold badge12 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Thomas Kekeisen · Accepted Answer · 2016-11-03 17:02:52Z

1

I came across this, but in my case it was just a missing / at the beginning of the url. So this is wrong:

.state('detail', {
  url:         'detail/:key',
  templateUrl: 'tpl.html'
});

And this is correct/working:

.state('detail', {
  url:         '/detail/:key',
  templateUrl: 'tpl.html'
});

I dont needed any <base> tags in my <head> at all. My application is in a subfolder called /app.

answered Nov 3, 2016 at 17:02

Thomas Kekeisen

4,4164 gold badges37 silver badges57 bronze badges

Comments

Radim Köhler · Accepted Answer · 2016-05-19 04:13:20Z

-1

By default - UI-Router will always show the param in address bar, if is defined in the url (not just in params : {} option)

To prove it, there is a plunker with your scenario, which does what you would expect - http://plnkr.co/edit/9uBlhNoNqZsjAJEdIhYa?p=preview

Links

<a ui-sref="list">
<a ui-sref="detail({key:1})">
<a ui-sref="detail({key:22})">

A state def (as yours)

.state('list', {
  url: '/',
  templateUrl: 'tpl.html',
  controller: 'ParentCtrl',
})
.state('detail', {
  url: '/detail/:key',
  params: { 
    key: { value: "" }
  },
  templateUrl: 'tpl.html',
  controller: 'ChildCtrl',
});

Check it here

(you can run it in separate window, by clicking the icon in the top right corner - and see the address bar with a key param)

answered May 19, 2016 at 4:13

Radim Köhler

124k48 gold badges243 silver badges343 bronze badges

6 Comments

kaplievabell Over a year ago

I am not using <a ui-sref="value">. I need separate action for ng-click (sets clicked row as active) and ng-dblclick (changes the view to detail view). For example: <product ng-click='setItemActive({key:product.key})' ng-dblclick="goDetailView({key:product.key})"></product>

Radim Köhler Over a year ago

I am not sure if I do understand what is the issue. But I try to follow your comment here plnkr.co/edit/WIrNyAQjM771335Wzx4w?p=preview 1) it is working 2) on the list we have links which with double-click will trigger your action 3) detail has BACK action, navigating us back to list.. Does it help? a bit?

kaplievabell Over a year ago

Problem is that it does not change the browser address url to http://myaddress/detail/product1 . The address stays http://myaddress I need ability to share the address url to specific product.

Radim Köhler Over a year ago

Well, try my plunk.. it does what you want run.plnkr.co/plunks/WIrNyAQjM771335Wzx4w

kaplievabell Over a year ago

The planker does work. Yet it does not work when added to my website. I commented out verything I had on the page, and added sample from planker, and had the same behaivor: state changes correctly, but url stays localhost. I changed the state url to be url: '/detail?key', and that fixed the issue. It also fixed my other problem described in link. Thank you for help

|

Collectives™ on Stack Overflow

Angularjs ui-router changes state but does not update url when passing params

3 Answers 3

Comments

Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related