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

2
votes

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.

3
javascriptangularjsangular-ui-router

3 Answers

1
votes

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'
})
1
votes

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.

0
votes

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)