Angular-UI-Router modalny jak pinterest

Question

Tworzę aplikację z galerią, która wygląda bardzo podobnie do http://pinterest.com. Na Pintereście kliknięcie pinezki pokazuje stronę pinezki u góry oglądanej galerii. URL zmienia się w adres URL pinezki i nie zawiera żadnych informacji o galerii za szczegółami. Możesz kliknąć "X" lub w tle, aby wrócić do galerii, w której przeglądałeś bez ponownego ładowania.

Jak mogę to zduplikować za pomocą UI-Routera?

Potrzeby:

• wyświetlają te same dane modalne w kilku różnych galeriach
• przełącznik do tych samych informacji url we wszystkich przypadkach
• jeśli url szczegółów ujęto zimno (z zakładki lub link) , po prostu wyświetl puste, szare tło z tyłu i wyłącz je zamykając

Dzięki!

Answer 1

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

Zależy UI-bootstrap dla modalnej.

Jeśli wolisz używać fancybox lub innego lightbox, możesz zastosować podobne podejście. Użyj wywołania zwrotnego onEnter, aby zainicjować lightbox, a następnie przejść do stanu nadrzędnego po jego zamknięciu. (I możesz chcieć dodać wywołanie zwrotne onExit, jeśli przejdziesz dalej bez zamykania lightboxa.)