Pinterest gibi Angular-UI-Router modeli

Question

http://pinterest.com gibi görünen bir galeriye sahip bir uygulama yapıyorum. Pinterest'te, bir pini tıkladığınızda, görüntülemekte olduğunuz galerinin üst kısmındaki iğne sayfasını gösterir. URL, pin URL'sine dönüşür ve ayrıntıların ardındaki galeri hakkında herhangi bir bilgi içermez. Yeniden yüklemeden göz attığınız galeriye geri dönmek için "X" veya arka plan üzerinde tıklayabilirsiniz.

Bunu UI-Router ile nasıl kopyalayabilirim?

İhtiyaçlar: ayrıntıları url (yer imi veya bağlantısından) soğuk girilirse aynı ayrıntıları aynı ayrıntılara birkaç farklı galerilerde üzerinde

anahtarı modal

• ekran
• her durumda url Sadece boş bir gri arkaplan görüntüledikten sonra kapatmayı devre dışı bırakma

Teşekkürler! angular-ui-router's FAQ itibaren

Answer 1

:

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

O modal için ui-bootstrap bağlıdır.

fancybox veya başka bir ışık kutusunu kullanmayı tercih ederseniz, benzer bir yaklaşım kullanabilirsiniz. Işık kutusunu başlatmak için onEnter geri aramasını kullanın, ardından kapandığında ebeveyn durumuna geçiş yapın. (Işık kutusunu kapatmadan geçiş yaparsanız, bir onExit geri arama eklemek isteyebilirsiniz.)