When using UI-Router to navigate to a detailed view, I am facing an issue where the state changes correctly and parameters are passed correctly, but the URL address in the browser remains unchanged. I want to be able to display the passed params in the URL.
Here is the code snippet from 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'
})
// Using the HTML5 History API
$locationProvider.html5Mode(true);
}]);
Below is the controller function for navigating 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 ");
// The state changes correctly and passes params to DetailController,
// however, the browser address URL does not update.
// How can I update the URL in the browser here?
$state.go('detail',
{key: $scope.selectedPDFKey},
{
location:true
});
}
}
// Detail view controller
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 the browser address bar gets replaced. How can I ensure that the URL in the browser address bar also gets updated when passing parameters in $state.go()? Thank you.