Angular-UI-Router modal like pinterest

我正在製作一個應用程序，看起來很像http://pinterest.com。在Pinterest中，當您點擊某個圖釘時，會在您正在查看的圖庫頂部顯示圖釘頁面。該網址會變爲引腳網址，並且不會包含任何有關該細節後面的圖庫的信息。您可以點擊「X」或背景以返回您瀏覽的圖庫，無需重新加載。Angular-UI-Router modal like pinterest

如何使用UI-Router複製此內容？

需求：

顯示相同的細節
開關模態在幾個不同的畫廊，以相同的細節在所有情況下的URL
如果輸入的詳細信息網址冷（從書籤或鏈接），只是在後面顯示一個空的灰色背景並禁用關閉

謝謝！

來源

2013-12-12 Sean Clark Hess

從angular-ui-router's FAQ：

$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"); 
      } 
     }); 
    } 
});

這取決於用戶界面的自舉的模式。

如果您更喜歡使用fancybox或其他燈箱，您可以使用類似的方法。使用onEnter回調初始化燈箱，然後在關閉時轉換到父級狀態。（你可能想添加一個onExit回調，如果你過渡而不關閉燈箱。）

來源

2013-12-12 19:21:42 towr

我不明白的決心和$ scope.save部分。是否有更簡單/基本的解決方案？ –

@DiodeDan它是用於更新項目的模式的示例代碼，因此它有一些可能不適用於其他情況的元素。 '$ scope.save'用於模態上保存按鈕的功能。 'resolve'用於將東西作爲本地屬性添加到控制器（例如涉及的項目）。如果他們沒有必要，他們可以被排除在外。 – towr

有沒有辦法在'return $ state.transitionTo（「items」）;'回到之前的狀態。想象一下網站標題上的一個按鈕，這個按鈕打開一個模式框，這個模式框可以在網站的任何狀態下打開。對於狀態轉換回到先前的狀態，而不是選擇用戶應該返回的特定狀態，是不是有意義？繼此之後，讓模態的url繼承前一個狀態的url有意義嗎？ – CMCDragonkai

Angular-UI-Router modal like pinterest

回答

相關問題