javascript - Angularjs ui-router改变状态但在传递参数时不更新url

Question

我正在使用 UI-Router 导航到详细 View 。它正确地更改状态并正确传递参数，但浏览器中的url地址保持不变。我想在 url 中显示传递的参数。

应用程序.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 函数:

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;
}

如果我删除 $state.go('detail') 中的 params，浏览器地址栏中的 url 将被替换。当我在 $state.go() 中传递参数时，如何替换浏览器地址栏中的 url。谢谢。

Answer 1

当状态更改为在 url 中使用查询时，问题已解决:

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