Angularjs UI路由器更改状态，但通过参数时不更新网址

我正在使用UI-Router导航到详细视图。它正确更改状态并正确传递参数，但浏览器中的URL地址保持不变。我想显示在URL中传递的参数。Angularjs UI路由器更改状态，但通过参数时不更新网址

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')params，在浏览器地址栏中的URL将被替换。当我在$ state.go（）中传递参数时，如何替换浏览器地址栏中的url？谢谢。

来源

2016-05-19 kaplievabell

默认情况下 - UI，路由器会一直显示在地址栏帕拉姆，如果URL 定义（不只是在params : {}选项）

为了证明这一点，有一个与你的场景中plunker，这确实你所期望的 - http://plnkr.co/edit/9uBlhNoNqZsjAJEdIhYa?p=preview

链接

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

一个国家高清（和你）

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

检查here

（您可以在单独的窗口中通过点击右上角的图标来运行它， - 看到地址栏用钥匙PARAM）

来源

2016-05-19 04:13:20

我没有使用''。我需要对'ng-click'单独行动（将点击的行设置为活动状态）和'ng-dblclick'（将视图更改为详细视图）。例如： '' – kaplievabell

我不确定是否我明白什么是问题。但是，我在这里试着http://plnkr.co/edit/WIrNyAQjM771335Wzx4w?p=preview跟随您的评论1）它是我们与双击会触发你的行动链接列表上工作2）3）详情具有BACK行动，导航我们回到列表..它有帮助吗？一点点？ –

问题是它不会将浏览器地址url更改为'http：// myaddress/detail/product1'。地址保留为'http：// myaddress'我需要将地址url分享给特定产品的功能。 – kaplievabell

问题是固定当状态被改变在URL中使用的查询为：

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

来源

2016-05-20 14:14:20 kaplievabell

我碰到这个来了，但对我来说，这只是一个缺少/在URL的开头。因此，这是错误的：

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

这是正确/工作：

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

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

来源

2016-11-03 17:02:52

Angularjs UI路由器更改状态，但通过参数时不更新网址

回答

相关问题