我正在使用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?謝謝。
我沒有使用''。我需要對'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