1

Estoy desarrollando una aplicación en Laravel + Angular haciendo uso de ngLaravel, que es una especie de CRUD que integra Laravel y Angular con JWT y una plantilla.

Aunque no tengo mucha experiencia en Angular, he logrado crear los módulos y servicios que necesitaba para el desarrollo de la aplicación hasta que me he encontrado con el problema de mantener el estado de los filtrados y la paginación al volver atrás ya sea con el mismo navegador o los mismos botones de la aplicación.

He investigado mucho sobre el funcionamiento de la modificación de URLs para guardar parámetros con $location.search().

En principio guardar las variables no me supone ningún problema. El problema lo tengo cuando cambio de vista o refresco la página con las variables en la URL (Ej: /angular-frontend/#/app/ejercicios?page=2&per_page=10). Al cargar el controlador, la url se vacía y $location.search() también.

He activado el modo HTML5 del $locationProvider después de ver en varios artículos que era necesario, pero aun así sigue vaciando los parámetros al recargar la página.

Para mostrar un poco de código, guardo los parámetros en la URL de la siguiente forma:

$scope.pageChanged = function(per_page) {
  $location.search('page', $scope.pagination.current_page);
  $location.search('per_page', per_page.id);
  EjercicioService.pageChange($scope.pagination.current_page,per_page.id)
    .then(function(data){
      $scope.ejercicios = data;
      $scope.pagination = $scope.ejercicios.metadata;
      $scope.maxSize = 5;
    });
};

Se guardan correctamente ya que la URL me cambia.

El problema viene cuando recargo la URL y intento recuperarlos por ejemplo así:

var qs = $location.search();
console.log(qs);

Estos vienen vacíos... y me desaparecen de la URL. Si que es cierto, que durante unos milisegundos siguen en la URL por lo que estoy mosca por si algún modulo esta limpiando los parametros previamente...

Se que quizás no este dando suficiente información para ver el problema, pero agradecería si alguien puede darme alguna pista de por donde pueden ir los tiros o si os ha ocurrido algo similar.

EDIT 1: Adjunto la configuración del Route Provider:

.state('app.ejercicios',{
  url: "/ejercicios",
  templateUrl: "app/modules/ejercicio/views/ejercicios.html",
  ncyBreadcrumb: {
    label: 'Ejercicios',
    parent:'app'
  },
  data: {
    permits: { // this permissions not define in back-end model
      withAny: ['view_ejercicios','delete_ejericicios']
    }
  },
  reloadOnSearch: false,
  controller:'EjercicioListCtrl',
  location: false,
  resolve: {
    trans:['RequireTranslations',
    function (RequireTranslations) {
      RequireTranslations('modules/ejercicio');
    }],
    dep: ['trans','$ocLazyLoad',
    function(trans, $ocLazyLoad ){
      return $ocLazyLoad.load([
        'sweet-alert2', 'ui-bs-paging', 'EjercicioServiceModule',
        'FiltroServiceModule', 'CategoriaFiltroServiceModule',
        'ui-select-filter', 'select2'
      ]).then(
        function(){
          return $ocLazyLoad.load([
            'app/modules/ejercicio/controllers/EjercicioListCtrl.js'
          ]);
        }
      );
    }]
  }
})

Gracias de antemano.

3
  • Serviria mucho que explicaras mejor que quisiste decir con "El problema lo tengo cuando cambio de vista o refresco la página con las variables en la URL (Ej: /angular-frontend/#/app/ejercicios?page=2&per_page=10). Al cargar el controlador, la url se vacía", en lo personal no lo entendi. Commented el 28 ago. 2017 a las 14:40
  • Digamos que yo accedo a /app/ejercicios, y cambio el paginado a la pagina 2.. Con el primer bloque de código guardo en $location.search() el parámetro 'page' y 'per_page' y la url se modifica automáticamente como tiene que ser. Cojo la URL completa la copio y la vuelvo a pegar en otra pestaña por ejemplo. La lanzo, y automáticamente al cargar la página los parámetros desaparecen, y si hago un log de $search.location() esta vacío siempre, y por lo tanto no puedo mantener el estado del paginado.
    – Rubén L.
    Commented el 28 ago. 2017 a las 14:48
  • He seguido varios tutoriales como por ejemplo metaltoad.com/blog/… y el proceso es similar en todos y sinceramente entiendo el funcionamiento.. pero lo haga como lo haga al ejecutarse el controlador los parámetros me desaparecen... no se si quizás algún parámetro o configuración del ui-router me esta limpiando las rutas... pero he buscado en todo el código y no encuentro nada... Luego no se si realmente para hacer este proceso es obligatorio el HTML5 mode en las rutas, pero he cambiado el sistema y funciona exactamente igual...
    – Rubén L.
    Commented el 28 ago. 2017 a las 14:49

1 respuesta 1

1

Deberias agregar a la configuracion de tu ruta en el routeProvider el atributo reloadOnSearch

$routeProvider   .when('/items', {
    controller: 'ItemsCtrl',
    templateUrl: '/templates/items',
    reloadOnSearch: false   },   ... );

https://stackoverflow.com/questions/17513093/how-can-i-set-a-query-parameter-in-angularjs-without-doing-a-route

2

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.