tpls - Creación de Modals con estado en AngularJS con ruta de UI angular y modal UI

ng angular

Question

Estoy tratando de hacer un modal statefull usando la ruta ui angular y el ui angular u modal.

digamos que quiero completar un formulario de registro que consta de 4 páginas. Todas estas páginas están en un modal.

Puedo abrir modal en cambio de estado. Pero después de eso, quiero abrir cada página del modal sobre la base del estado.

    $stateProvider.state(''signup'', {
  url: ''/signup'',
  template: ''<ui-view />'',
  abstract: true
})
.state(''signup.modal'', {
  url: '''',
  resolve: {
    modalInstance: function($modal) {
      return $modal.open({
        template: ''<div ui-view="modal"></div>'',
        controller: ''signUp'',
        windowClass: ''signup-edit-modal'',
        backdrop: ''static''
      })
    }
  },
  onEnter: [''modalInstance'', ''$timeout'', ''$state'',function(modalInstance,$timeout, $state) {
    modalInstance.opened.then(function(status){
      if(status){
        $timeout(function(){
          // changing color of background / backdrop of modal for signup
          angular.element(''.reveal-modal-bg'').css(''backgroundColor'',''rgba(255, 255, 255, .9)'');
        })
      }
    })
    $state.go(''signup.welcome'')
  }],
  onExit: function(modalInstance) {
    modalInstance.close(''dismiss'');
    angular.element(''.reveal-modal-bg'').css(''backgroundColor'',''rgba(0, 0, 0, 0.45)'');
  }
})
.state(''signup.welcome'', {
  url: "/welcome",
    views: {
      modal: {
        templateUrl: ''main/signup/welcome.html'',
        controller: ''signupWelcome''
      }
    }
}).state(''signup.step1'', {
  url: "/step1",
    views: {
      modal: {
        templateUrl: ''main/signup/step1.html'',
        controller: ''signupStep1''
      }
    }
})

el código anterior puede abrir el modal y también cambia el estado para dar la bienvenida, pero por alguna razón la plantilla no se carga dentro del modal. he asignado la plantilla a ui-view=modal , debería abrir pero no.

por favor, ayúdame. gracias por adelantado

Answer 1

Esa es la forma incorrecta de hacerlo.

Sus rutas representan el estado en que se encuentra su aplicación. El concepto mismo de modales es mantener el estado mientras captura lo que podría ser un proceso completamente separado. Lo que debe hacer es crear sus propias transiciones de pasos para su modal y cargar la ''plantilla'' requerida para cada transición a la vista usando ng-if (I preferir esto) o ng-show (puede haber otras formas).

Si quieres usar rutas, entonces no uses básicamente un modal.

Answer 2

Finalmente pude ver el modal sobre la base del estado. Estoy de acuerdo con @Obi Onuorah en que el concepto de modales es mantener el estado y realizar alguna acción con los requisitos. Pero si necesita mostrar el modal sobre la base del estado, es posible.

Gracias a la asombrosa documentación de la ruta angular-ui https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views#view-names---relative-vs-absolute-names, que explica muy bien el diferente entre la denominación absoluta vs nomenclatura relativa de ui-view.

aquí está el código de muestra de la ruta de UI

    $stateProvider
  .state(''list'', {
    url: ''/'',
    template: ''<ul><li ng-repeat="test in testObj"><a ui-sref="view({id: test.id})">{{ test.name }}</a></li></ul>'',
    controller: function($scope) {
      $scope.testObj = testObj;
    }
  })
  .state(''modal'', {
    abstract: true,
    parent: ''list'',
    url: '''',
    onEnter: [''$modal'', ''$state'', function($modal, $state) {
        console.log(''Open modal'');
        $modal.open({
          template: ''<div ui-view="modal"></div>'',
          backdrop: false,
          windowClass: ''right fade''
        }).result.finally(function() {
          $state.go(''list'');
      });
    }]
  })
  .state(''view'', {
    url: '':id'',
    parent: ''modal'',
    views: {
      ''modal@'': {
        template: ''<h1>{{ test.name }}</h1><br />/
        <a ui-sref="edit({id: test.id})">Edit</a><br />/
        <a href="#" ng-click="$close()">Close</a>'',
        controller: function($scope, test) {
          $scope.test = test;
        },
        resolve: {
          test: function($stateParams) {
            return testObj[$stateParams.id];
          }
        }
      }
    }
  })
  .state(''edit'', {
    url: '':id/edit'',
    parent: ''modal'',
    views: {
      ''modal@'': {
        template: ''<h1>Edit {{ test.name }}</h1><br /> /
          <a ui-sref="view({id: test.id})">View</a> <br />/
          <a href="#" ng-click="$close()">Close</a>'',
        controller: function($scope, test) {
          $scope.test = test;
        },
        resolve: {
          test: function($stateParams) {
            return testObj[$stateParams.id];
          }
        }
      }
    }
  });

He hecho un simple plunker. http://plnkr.co/edit/hw9x7B?p=preview