Angular-UI-Router modal wie pinterest

Ich mache eine App mit einer Galerie, die viel wie http://pinterest.com aussieht. Wenn Sie in Pinterest auf einen Pin klicken, wird die Pin-Seite über der Galerie angezeigt, die Sie gerade angezeigt haben. Die URL ändert sich in die PIN-URL und enthält keine Informationen zur Galerie hinter den Details. Sie können auf das "X" oder auf den Hintergrund klicken, um zu der Galerie zurückzukehren, in der Sie ohne Neuladen geblättert haben.Angular-UI-Router modal wie pinterest

Wie kann ich dies mit UI-Router duplizieren?

Needs:

Display die gleichen Details über verschiedene Galerien modal
Schalter auf die gleichen Details URL in allen Fällen
wenn die URL Details kalt eingegeben wird (von einem Lesezeichen oder einen Link) , zeigen Sie einfach einen leeren grauen Hintergrund an und deaktivieren Sie das Schließen

Vielen Dank!

Quelle

2013-12-12 Sean Clark Hess

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

Es hängt von ui-Bootstrap für den modal.

Wenn Sie es vorziehen, fancybox oder einen anderen Leuchtkasten zu verwenden, können Sie einen ähnlichen Ansatz verwenden. Verwenden Sie den Callback onEnter, um den Leuchtkasten zu initialisieren, und wechseln Sie dann in den übergeordneten Status, wenn es geschlossen wird. (Und möglicherweise möchten Sie einen OnExit-Rückruf hinzufügen, wenn Sie weggehen, ohne den Leuchtkasten zu schließen.)

Quelle

2013-12-12 19:21:42 towr

Ich verstehe nicht die Auflösung und $ scope.save Teile. Gibt es dafür eine einfachere/einfachere Lösung? –

@DiodeDan Es handelt sich um Beispielcode für ein Modal, das zum Aktualisieren von Elementen verwendet wird, sodass einige Elemente in anderen Fällen möglicherweise nicht zutreffen. Das '$ scope.save' ist für die Funktionalität hinter einer Save-Schaltfläche auf dem Modal. Die "Auflösung" ist das Hinzufügen von Dingen als lokale Eigenschaften zum Controller (wie zum Beispiel das betreffende Element). Sie können weggelassen werden, wenn sie nicht notwendig sind. – towr

Gibt es eine Möglichkeit, mit 'return $ state.transitionTo (" items ");' in den vorherigen Zustand zurückzukehren. Stellen Sie sich eine Schaltfläche in der Kopfzeile einer Website vor, diese Schaltfläche öffnet eine modale Box, und diese modale Box könnte in jedem Zustand auf der Website geöffnet werden. Wäre es nicht sinnvoll, wenn der Staat in den vorherigen Zustand zurückwechselt, anstatt einen bestimmten Zustand auszuwählen, zu dem ein Benutzer zurückkehren sollte? Könnte es sinnvoll sein, dass die URL des Modals die URL des vorherigen Status übernimmt? – CMCDragonkai

Angular-UI-Router modal wie pinterest

Antwort

Verwandte Themen