Question

我正在制作一个看起来很像http://pinterest.com的画廊的应用。在Pinterest中，当您单击某个图钉时，它会显示您正在查看的图库顶部的图钉页面。 URL更改为pin url，并且不包含有关详细信息背后的库的任何信息。您可以单击“X”或在背景上返回您正在浏览的图库而无需重新加载。

如何使用UI-Router复制此内容？

需要：

在几个不同的画廊中显示相同的详细信息模式
在所有情况下切换到相同的详细信息网址
如果详细信息网址是冷输入的（来自书签或链接），只需在后面显示空的灰色背景并禁用关闭

谢谢！

Answer 1

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

它取决于模态的ui-bootstrap。

如果您更喜欢使用fancybox或其他灯箱，则可以使用类似的方法。使用onEnter回调初始化灯箱，然后在关闭时转换为父状态。（如果你在没有关闭灯箱的情况下过渡，你可能想要添加一个onExit回调。）

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

1 个答案: