javascript - uibmodal - modal open angularjs example

Angular-UI-Router modal como pinterest

Question

Estoy haciendo una aplicación con una galería que se parece mucho a http://pinterest.com . En Pinterest, al hacer clic en un alfiler, muestra la página del pin en la parte superior de la galería que estaba viendo. La URL cambia a la URL del pin y no contiene información sobre la galería detrás de los detalles. Puede hacer clic en la "X" o en el fondo para volver a la galería donde estaba navegando sin volver a cargar.

¿Cómo puedo duplicar esto con UI-Router?

Necesariamente:

• mostrar el mismo detalle modal en varias galerías diferentes
• cambiar a la misma URL de detalles en todos los casos
• si la URL de detalles se ingresa en frío (de un marcador o enlace), simplemente visualice un fondo gris vacío detrás e inhabilite el cierre

¡Gracias!

Answer 1

De las preguntas más frecuentes de angular-ui-router :

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

Depende de ui-bootstrap para el modal.

Si prefiere usar fancybox u otro lightbox, puede usar un enfoque similar. Utilice la devolución de llamada onEnter para inicializar la caja de luz, luego onEnter la transición al estado padre cuando se cierre. (Y es posible que desee agregar una devolución de llamada onExit si hace la transición sin cerrar el lightbox).