Angular-UI-Router modal like pinterest

Question

I'm making an app with a gallery that looks a lot like http://pinterest.com. In Pinterest, when you click a pin, it shows the pin page over the top of the gallery you were viewing. The URL changes to the pin url, and does not contain any information about the gallery behind the details. You can click the "X" or on the background to get back to the gallery where you were browsing without reloading.

How can I duplicate this with UI-Router?

Needs:

• display the same details modal over several different galleries
• switch to the same details url in all cases
• if the details url is entered cold (from a bookmark or link), just display an empty gray background behind and disable closing

Thanks!

Answer 1

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

It depends on ui-bootstrap for the modal.

If you prefer using fancybox or another lightbox, you can use a similar approach. Use the onEnter callback to initialize the lightbox, then transition to the parent-state when it closes. (And you might want to add an onExit callback if you transition away without closing the lightbox.)