pinterestのような角度UIルータのモーダル

Question

ギャラリーはhttp://pinterest.comのように見えます。 Pinterestでは、ピンをクリックすると、表示していたギャラリーの上部にピンページが表示されます。 URLはピンのURLに変更され、詳細の後ろにギャラリーに関する情報は含まれません。 「X」または背景をクリックすると、リロードせずにブラウズしていたギャラリーに戻ることができます。

これをUI-Routerでどのように複製できますか？

ニーズ：詳細URLが（ブックマークやリンクから）寒い入力された場合、同じ内容が、すべての場合

で同じ内容のURLにいくつかの異なるギャラリー

スイッチ上でモーダル

• 表示空の灰色の背景を背景に表示して閉じることができます。

ありがとうございました！ angular-ui-router's FAQから

Answer 1

：

$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.then(function(result) { 
      if (result) { 
       return $state.transitionTo("items"); 
      } 
     }); 
    } 
}); 

それはモーダルのUI-ブートストラップに依存します。

fancyboxまたは別のライトボックスを使用する場合は、同様の方法を使用できます。 onEnterコールバックを使用してライトボックスを初期化し、終了時に親ステートに移行します。 （また、ライトボックスを閉じずに移行する場合は、onExitコールバックを追加することもできます）