Angular-UI-Router模式就像pinterest一樣

Question

我正在制作一個看起來很像http://pinterest.com的畫廊的應用程序。 在Pinterest中，當您單擊某個圖釘時，它會顯示您正在查看的圖庫頂部的圖釘頁面。 URL更改為pin url，並且不包含有關詳細信息背后的庫的任何信息。 您可以單擊“X”或在背景上返回您正在瀏覽的圖庫而無需重新加載。

如何使用UI-Router復制它？

需求：

• 在幾個不同的畫廊中顯示相同的細節模式
• 在所有情況下切換到相同的詳細信息URL
• 如果詳細信息網址是冷輸入的（從書簽或鏈接），只需在后面顯示一個空的灰色背景並禁用關閉

謝謝！

Answer 1

來自angular-ui-router的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");
            }
        });
    }
});

這取決於模態的ui-bootstrap。

如果您更喜歡使用fancybox或其他燈箱，您可以使用類似的方法。 使用onEnter回調初始化燈箱，然后在關閉時轉換為父狀態。 （如果你在沒有關閉燈箱的情況下過渡，你可能想要添加一個onExit回調。）