Angularjs ui-routerは状態を変更しますが、パラメータを渡すときにURLを更新しません。

UIルーターを使用して詳細ビューにナビゲートしています。状態が正しく変更され、パラメータが正しく渡されますが、ブラウザのURLアドレスは変更されません。私はURLに渡されたparamsを表示したいと思います。Angularjs ui-routerは状態を変更しますが、パラメータを渡すときにURLを更新しません。

は詳細状態に行くために

'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); 
}]);

コントローラ機能をapp.js：

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がある、アドレスバーにPARAMが表示されますこれは、あなたが期待する何を - デフ（あなたと）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）細部がある行動、私たちをリストに戻す..それは助けになるか？少しですか？ –

ブラウザアドレスの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' 
});

私はすべての私の<head>内の任意の<base>タグを必要といけません。私のアプリケーションは/appというサブフォルダにあります。

出典

2016-11-03 17:02:52

Angularjs ui-routerは状態を変更しますが、パラメータを渡すときにURLを更新しません。

答えて

関連する問題