Angular-UI-Router 模态，如 pinterest

Question

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

如何使用 UI-Router 复制它？

需求：

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

谢谢！

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 回调。）