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路由器更改狀態，但通過參數時不更新網址

回答

相關問題