Question

我正在使用UI-Router导航到详细视图。它正确地更改状态并正确传递参数，但浏览器中的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;
}

如果我删除params中的$state.go('detail')，则会替换浏览器地址栏中的网址。当我在$ state.go（）中传递参数时，如何更换浏览器地址栏中的URL。谢谢。

Answer 1

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

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

Answer 2

我遇到了这个，但就我而言，它只是在网址开头缺少/。所以这是错误：

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

这是正确/正常：

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

我根本不需要<base>中的任何<head>个标签。我的应用程序位于名为/app的子文件夹中。

Answer 3

默认情况下 - UI-Router将始终在地址栏中显示参数，如果在网址中定义（不仅仅在params : {}选项中）

为了证明这一点，你的场景中有一个吸引人的东西，可以达到预期效果 - http://plnkr.co/edit/9uBlhNoNqZsjAJEdIhYa?p=preview

链接

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

状态def（和你一样）

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

检查here

（您可以在单独的窗口中运行它，通过单击右上角的图标 - 并使用密钥参数查看地址栏）

Angularjs ui-router更改状态，但在传递params时不更新url

3 个答案: