Javascript Angularjs ui路由器在传递参数时更改状态但不更新url

我正在使用UI路由器导航到详细视图。它正确地更改状态并正确地传递参数，但浏览器中的url地址保持不变。我想在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); 
 }]);

要转到详细信息状态的控制器功能：

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'）

中的

参数，浏览器地址栏中的url将被替换。在$state.go（）中传递参数时，如何使浏览器地址栏中的url也被替换。多谢各位
 默认情况下-如果url中定义了参数，UI路由器将始终在地址栏中显示该参数（而不仅仅是在
params:{}
选项中）

为了证明这一点，你的场景中有一个plunker，它实现了你所期望的-

链接

检查一下

（您可以在单独的窗口中运行它，方法是单击右上角的图标-并查看带有键参数的地址栏）
当状态更改为使用url中的查询时，问题已修复为：

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

我遇到了这个问题，但在我的例子中，它只是url开头缺少了一个
/
。所以这是错误的：

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

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

这是正确的/有效的：

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

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

我的
中根本不需要任何
标记。我的应用程序位于名为
/app
的子文件夹中，我没有使用
。我需要对
ng click
（将单击的行设置为活动）和
ng dblclick
（将视图更改为详细视图）执行单独的操作。例如：
我不确定自己是否理解问题所在。但是我试着在这里跟随你的评论1）它正在工作2）在列表上我们有链接，双击将触发你的操作3）详细信息返回操作，引导我们返回列表。。有帮助吗？有一点问题是，它不会将浏览器地址url更改为
http://myaddress/detail/product1
。地址保持
http://myaddress
我需要能够共享特定产品的地址url。好吧，试试我的plunk。。它能做你想做的，浮游生物能做的。然而，当添加到我的网站时，它就不起作用了。我注释掉了页面上的所有内容，添加了来自planker的示例，并具有相同的行为：状态正确更改，但url保持不变。我将状态url更改为
url:“/detail？key”
，这就解决了这个问题。它还修复了中描述的其他问题。谢谢你的帮助