web-dev-qa-db-ja.com

Angular URLの変更時にUI-Routerがモーダルウィンドウを開く

私のプロジェクトでは、angular-ui-routerとangular-bootstrapを使用しています。

フォローユースケースを実装したい：

ユーザーが「編集」ボタンをクリックすると、UIルーターはURLを変更し、モーダルウィンドウを開きます。ブラウザの戻るボタンをクリックして戻ると、モーダルウィンドウが閉じています。

モーダルウィンドウが開かれているときにユーザーがページをリロードする場合、アプリケーションはメインのui-viewコンテナでモーダルウィンドウのコンテンツをレンダリングする必要があります。

この種馬で見ることができるこのユースケース： http://canopy.co/ （アイテムをクリックしてページをリロードしてみてください）

質問：上記の動作を実装する方法は？

これが私のjsFiddleです http://jsfiddle.net/sloot/ceWqw/3/

var app = angular.module('myApp', ['ui.router', 'ui.bootstrap'])
.config(function ($stateProvider, $urlRouterProvider) {

  $urlRouterProvider.otherwise('/');
  $stateProvider
    .state('app', {
      url: '/',
      controller: 'AppCtrl',
      templateUrl: '/views/app.html'
    })
    .state('item', {
      url: '/profile',
      controller: 'ItemCtrl',
      templateUrl: '/views/item.html'
    });
})
.controller('AppCtrl', function($scope, $modal, $state){
  $scope.open = function(){

    // open modal whithout changing url
    $modal.open({
      templateUrl: '/views/item.html'
    });

    // I need to open popup via $state.go or something like this
  };
})
.controller('ItemCtrl', function(){});
javascriptangularjsbootstrap-modalangular-ui-router
24
Anton Rodin

Ui-router FAQには素晴らしい例があります。キーはonEnterパラメータを使用しています。

https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-open-a-dialogmodal-at-a-certain-state

以下は、ui-bootstrapの$ modalサービスを使用して実行する例です。この例では、onEnter関数のみを指定しています。テンプレート、コントローラーなどはありません。したがって、本質的にモーダルが表示され、閉じられるとアイテムの状態に戻ります。モーダルが閉じたときにアプリがどの状態に遷移するかを処理するのは、あなたの責任です。

$stateProvider.state("items.add", {
    url: "/add",
    onEnter: function($stateParams, $state, $modal, $resource) {
        $modal.open({
            templateUrl: "items/add",
            resolve: {
              item: function() { new Item(123).get(); }
            },
            controller: ['$scope', 'item', function($scope, item) {
              $scope.dismiss = function() {
                $scope.$dismiss();
              };

              $scope.save = function() {
                item.update().then(function() {
                  $scope.$close(true);
                });
              };
            }]
        }).result.finally(function() {
            $state.go('^');
        });
    }
});
19
ofairfoul

以下は、UI-RouterのGithubに関する問題で、何をしようとしているのかを説明しています。

Pinterestのオーバーレイに似た状態遷移

この reply で実装を確認できます。ただし、彼らが望む効果を達成する方法は最新バージョンで修正されており、機能を維持するために古いバージョンのUI-Routerを使用しています。

0
Cuong Vo