Modale con interfaccia UI-router come pinterest

Question

Sto creando un'app con una galleria che assomiglia molto a http://pinterest.com. In Pinterest, quando fai clic su un segnaposto, mostra la pagina pin sopra la parte superiore della galleria che stavi visualizzando. L'URL cambia nell'URL del pin e non contiene alcuna informazione sulla galleria dietro i dettagli. Puoi fare clic sulla "X" o sullo sfondo per tornare alla galleria in cui stavi navigando senza ricaricare.

Come posso duplicarlo con l'UI-Router?

Bisogni:

• visualizzare le stesse informazioni modale su diverse gallerie differenti
• interruttore per gli stessi dettagli url in tutti i casi
• se i dettagli URL viene immesso freddo (da un segnalibro o link) , basta mostrare uno sfondo grigio vuoto dietro e disabilitare la chiusura

Grazie!

Answer 1

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

Dipende da ui-bootstrap per il modale.

Se si preferisce utilizzare fancybox o un altro lightbox, è possibile utilizzare un approccio simile. Utilizzare il callback onEnter per inizializzare il lightbox, quindi passare allo stato padre quando si chiude. (E potresti voler aggiungere una richiamata su Esci se ti allontani senza chiudere la lightbox.)