5

UIブートストラップモーダルが開かれたときにブラウザのURLを一時的に変更したい（背後のページはそのままで、URLのみが変更されます）。モーダルが閉じられると、URL は元の URL に戻されます。

手順 :

  1. ユーザーがページを読み込む
    • URL : xyz.com/home
  2. ユーザーがリンクをクリックすると、モーダルが開きます
    • URL : xyz.com/detail/123
    • 可能な解決策：html5プッシュ状態でURLを変更する
    • 問題 : Angular ui-router は、変更された URL に従ってルートを実行しようとし、最終的にバックグラウンド ページを変更します。
  3. ユーザーがモーダルを閉じる
    • URL : xyz.com/home
    • 可能な解決策: html5 ポップ状態
    • 問題 : バックグラウンド ページをリロードするため、目的が失われます

実装例：Pinterest のピンとそのピンの詳細ポップアップ。

4

4 に答える 4

0

これは、ネストされた状態onEnterを持ち、コールバックを使用してモーダルをトリガーすることで実現できます。

$stateProvider
  .state('contacts', {
    url: '/home',
    templateUrl: 'home.html',
    controller: function($scope, MyService){
      $scope.contacts = MyService.getContacts();
    }
  })
  .state('contacts.details', {
    url: "^/details/:id", // using the absolute url to not have the "/home" prepended
    onEnter: function($state, $uibModal) {
      var modal = $uibModal.open({
        templateUrl: 'details.html',
        controller: function($scope, $stateParams, MyService) {
            // get data from service by url parameter
            $scope.contact = MyService.getContact($stateParams.id);
        }
      });

      modal.result.finally(function() {
        $state.go('^'); // activate the parent state when modal is closed or dismissed
      });
    }
  });

この手法は、ui-router の FAQ で説明されています。

ここでプランク。この例では、モーダルのスコープは - の子として作成され、スコープが渡されない場合の$rootScopeデフォルトの動作です。$uibModalこの場合、モーダルのコントローラーでサービスを使用して、url パラメーターでデータを取得する必要があります。

マスター URL と詳細 URL を次のようxyz.com/homeにするには、子状態でxyz.com/detail/123絶対 URL ( ) を使用する必要があります。^/details/:id

このソリューションを使用すると、詳細 URL を直接開いても、マスターと詳細の両方の状態が適切にアクティブ化されているため、詳細 URL を共有できます。

于 2016-06-11T16:30:19.557 に答える
0

ngSilent モジュールでそれを達成できると思います

https://github.com/garakh/ngSilent

使用$ngSilentLocation.silent('/new/path/'); （モーダルを開いて閉じた後）

于 2016-06-12T11:19:09.317 に答える
0

https://github.com/christopherthielen/ui-router-extras/tree/gh-pages/example/stickymodalを使用してこれを実装することができました

于 2016-06-21T11:36:57.777 に答える