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

Question

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

如何使用UI-Router复制它？

需求:

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

谢谢!

Answer 1

来自Angular-ui-router 的常见问题解答：

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