javascript - notificaciones - node js tiempo real

Ventana modal abierta de interfaz de usuario angular en el cambio de URL

Question

Uso angular-ui-router y angular-bootstrap en mi proyecto.

Quiero implementar el siguiente caso de uso:

Cuando el usuario hace clic en el botón "editar", UI-Router cambia la URL y abre la ventana modal. Cuando regreso haciendo clic en el botón Atrás del navegador, la ventana modal se está cerrando.

Si la página vuelve a cargar al usuario cuando se abre la ventana modal, la aplicación debe mostrar el contenido modal de la ventana en el contenedor principal de ui-view.

Este caso de uso que puedes ver en este padre: http://canopy.co/ (intenta hacer clic en el elemento y volver a cargar la página)

Pregunta : ¿Cómo implementar el comportamiento descrito anteriormente?

Aquí está mi jsFiddle http://jsfiddle.net/sloot/ceWqw/3/

var app = angular.module(''myApp'', [''ui.router'', ''ui.bootstrap''])
.config(function ($stateProvider, $urlRouterProvider) {

  $urlRouterProvider.otherwise(''/'');
  $stateProvider
    .state(''app'', {
      url: ''/'',
      controller: ''AppCtrl'',
      templateUrl: ''/views/app.html''
    })
    .state(''item'', {
      url: ''/profile'',
      controller: ''ItemCtrl'',
      templateUrl: ''/views/item.html''
    });
})
.controller(''AppCtrl'', function($scope, $modal, $state){
  $scope.open = function(){

    // open modal whithout changing url
    $modal.open({
      templateUrl: ''/views/item.html''
    });

    // I need to open popup via $state.go or something like this
  };
})
.controller(''ItemCtrl'', function(){});

Answer 1

Aquí hay un gran ejemplo en las preguntas frecuentes de ui-router. La clave es usar el parámetro onEnter.

https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-open-a-dialogmodal-at-a-certain-state

Aquí hay un ejemplo de hacerlo con el servicio modal $ de ui-bootstrap. Este ejemplo solo especifica una función onEnter. No hay plantilla, controlador, etc. Así que, esencialmente, se muestra el modal, luego, cuando está cerrado, vuelve al estado de los artículos. Usted sigue siendo responsable de manejar el estado de transición de su aplicación cuando se cierra el modo.

$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.finally(function() {
            $state.go(''^'');
        });
    }
});

Answer 2

Aquí hay un problema en UI-Router''s Github que describe lo que estás tratando de hacer:

Transiciones de estado similares a la superposición de Pinterest

Puedes ver la implementación en esta respuesta . Tenga en cuenta que la forma en que estaban logrando el efecto que desea ha sido parchada en la última versión y están usando una versión anterior de UI-Router para mantener la funcionalidad.