Enrutador de UI angular que no reconoce el estado en la actualización de la página -- javascript campo con angularjs campo con angular-ui-router campo con angularjs-digest camp Relacionados El problema

Angular UI-Router not recognizing state on page refresh


0
vote

problema

Español

He implementado la UI-enrutador angular para la gestión del estado en mi aplicación. Funciona bien cuando el usuario hace clic en las distintas partes de la página y las cargas de información apropiadas en la vista. Sin embargo, cuando el usuario actualiza la página de un estado que no sea el estado inicial, la página se carga como si estuviera en el estado inicial. Aquí están los detalles ...

Este es un catálogo de publicaciones y tenemos la visión inicial que enumera todas las publicaciones disponibles. Luego tenemos secciones y subsecciones. Si el usuario hace clic en cualquiera de estos, solo se mostrarán las publicaciones con las categorías apropiadas.

Aquí está la configuración:

  app.config(function($stateProvider, $urlRouterProvider) {    $stateProvider     .state('initial', {       url: '/',       templateUrl: 'list_posts.html'     })     .state('category', {       url: '/:category',       templateUrl: 'list_posts.html'     })     .state('subcategory', {       url: '/:category/:subcategory',       templateUrl: 'list_posts.html'     })     .state('singlePost', {       url: '/:category/:subcategory/:post',       templateUrl: 'single_post.html'     });    $urlRouterProvider.when('', '/');  });   

y mi controlador funciona así:

Tengo una variable llamada

  $scope.posts = [];   

Luego, llamo a una función de servicio para rellenar la matriz con todos los objetos de publicación.

Luego configuro a un oyente para un cambio de estado exitoso

    $scope.$on('$stateChangeSuccess', function () {      $scope.updatePosts( $stateParams );    });   

Tan efectivamente, comenzamos en la ruta '/' y si el usuario hace clic para cargar una sección específica, la URL cambiará y el nombre de esa sección estará en $ StillParams. Luego, el oyente dispara y llama al método de actualización. Este método vaciará las publicaciones y la recargue con solo las publicaciones que tienen ese nombre de sección como categoría. Una vez actualizado esta matriz, la vista cambia para reflejar la nueva lista de postes filtrados.

Aquí está la función de actualización

    $scope.updatePosts = function ( cats ) {     var length = $scope.dataset.length;     $scope.posts = [];      if ( Object.keys(cats).length == 0 ) {       console.log('empty cats object');       $scope.posts = $scope.dataset;       console.log($scope.posts);     }     else if ( Object.keys(cats).length == 1 ) {       console.log('one category');       console.log(cats);       for (var i = 0; i < length; i++) {         if ( $scope.dataset[i].category_slugs.indexOf( cats.category ) > -1 ) {           $scope.posts.push( $scope.dataset[i] );         }        }     }     else if ( Object.keys(cats).length == 2 ) {       console.log('two categories');       console.log(cats);       for (var i = 0; i < length; i++) {         if ( $scope.dataset[i].category_slugs.indexOf( cats.category ) > -1 && $scope.dataset[i].category_slugs.indexOf( cats.subcategory ) > -1 ) {           $scope.posts.push( $scope.dataset[i] );         }        }       console.log($scope.posts);     }    };   

Nuevamente, el problema es que todo esto funciona bien hasta que el usuario decida actualizar la página mientras está en una 'categoría', 'subcategoría', o estado 'singlepost'. En lugar de volver a la lista apropiada de publicaciones filtradas, simplemente volverá al estado inicial a pesar de que la URL dice lo contrario.

¿Alguna sugerencia sobre dónde está el problema?

Gracias

Original en ingles

I have implemented Angular UI-Router for state management in my app. It works fine when the user clicks on the various parts of the page and the appropriate information loads in the view. However, when the user refreshes the page from a state other than the initial state the page loads as if it were in the initial state. Here are the details...

This is a catalog of posts and we have the initial view which lists all the posts available. Then we have sections and subsections. If the user clicks for either of these then only the posts with the appropriate categories will be displayed.

Here is the config:

app.config(function($stateProvider, $urlRouterProvider) {    $stateProvider     .state('initial', {       url: '/',       templateUrl: 'list_posts.html'     })     .state('category', {       url: '/:category',       templateUrl: 'list_posts.html'     })     .state('subcategory', {       url: '/:category/:subcategory',       templateUrl: 'list_posts.html'     })     .state('singlePost', {       url: '/:category/:subcategory/:post',       templateUrl: 'single_post.html'     });    $urlRouterProvider.when('', '/');  }); 

And my controller works like this:

I have a variable called

$scope.posts = []; 

Then I call a service function in order to populate the array with all the post objects.

Then I set up a listener for a successful state change

  $scope.$on('$stateChangeSuccess', function () {      $scope.updatePosts( $stateParams );    }); 

So effectively, we start at the '/' route and if the user clicks to load a specific section then the url will change and the name of that section will be in $stateParams. Then the listener fires and calls the updatePosts method. This method will empty posts array and reload it with only the posts that have that section name as a category. Once this array is updated then the view changes to reflect the new filtered list of posts.

Here is the updatePosts function

  $scope.updatePosts = function ( cats ) {     var length = $scope.dataset.length;     $scope.posts = [];      if ( Object.keys(cats).length == 0 ) {       console.log('empty cats object');       $scope.posts = $scope.dataset;       console.log($scope.posts);     }     else if ( Object.keys(cats).length == 1 ) {       console.log('one category');       console.log(cats);       for (var i = 0; i < length; i++) {         if ( $scope.dataset[i].category_slugs.indexOf( cats.category ) > -1 ) {           $scope.posts.push( $scope.dataset[i] );         }        }     }     else if ( Object.keys(cats).length == 2 ) {       console.log('two categories');       console.log(cats);       for (var i = 0; i < length; i++) {         if ( $scope.dataset[i].category_slugs.indexOf( cats.category ) > -1 && $scope.dataset[i].category_slugs.indexOf( cats.subcategory ) > -1 ) {           $scope.posts.push( $scope.dataset[i] );         }        }       console.log($scope.posts);     }    }; 

Again, the issue is that this all works just fine until the user decides to refresh the page while it is in a 'category', 'subcategory', or 'singlePost' state. Instead of returning to the appropriate list of filtered posts it will just revert back to the initial state even though the url says otherwise.

Any suggestions on where the problem lies?

Thank you

           
     
     

Lista de respuestas

0
 
vote

Cuando estás haciendo una actualización dura, ¿va dentro del evento STATECHANGESUCCESS? En caso afirmativo, ¿puede ver sus $ estados que tenga en URL?

  sapply(sample_size, sim, beta3h0 = 0.7) #  n=25   n=50  n=100  n=250  n=500 n=1000  #  0.92   0.88   0.92   0.79   0.44   0.24  7  
 

When you are doing a hard refresh is it going inside stateChangeSuccess event? if yes are you able to see your $stateParams what ever you have in url?

 $scope.$on('$stateChangeSuccess', function () {     console.log($stateParams);     $scope.updatePosts( $stateParams );    }); 
 
 
     
     
0
 
vote

Intente seguir los cambios en .config ()

  sapply(sample_size, sim, beta3h0 = 0.7) #  n=25   n=50  n=100  n=250  n=500 n=1000  #  0.92   0.88   0.92   0.79   0.44   0.24  8  

En su código, no hay una coincidencia exacta para ningún estado y se ejecute. OPCIÓN (). Por ejemplo, considere que usted está actualizado de la URL de asumencias de la categoría State.let es 'localhost / libros' donde los libros representan /:category. Sin embargo, no hay estado con URL '/ Libros', causará que elija lo contrario ();

 

try following changes in .config()

.state('category', {   url: 'category/:category',   templateUrl: 'list_posts.html' }) 

In your code, there is no exact match's for any state and will execute .otherwise() option. For example, consider you are refreshing from category state.Let's assume url is 'localhost/books' where books stand for /:category.Since there is no state with url '/books',will cause to choose otherwise();

 
 

Relacionados problema

4  Infinitamente pegado con repetición de digerir bucles  ( Stuck with infinitely repeating digest loops ) 
Tengo un angular SPA Estoy corriendo con angular Cargando y AngularJS Bar v1.4.9. Desde hace algún tiempo, ha sido por lo sucediendo que después de la apl...

1  ¿Debería una llamada de función NGSUBMIT tener una declaración de retorno para activar el ciclo de $ Digest en el momento adecuado?  ( Should a ngsubmit function call have a return statement in order to trigger the ) 
Digamos que tenemos la siguiente forma simple: <form ngSubmit="doSomething()"> <input type="submit" value="Submit" /> <form> y en el controlador:...

1  Contenedor de información de herramientas de correa angular establecida a elemento de directiva  ( Angular strap tooltip container set to directive element ) 
He creado una directiva que, dados los datos requeridos, producirá un campo de entrada con reglas de validación, mensajes de validación y una información sobr...

3  ng-repetir dentro de la directiva no se actualizará al agregar o modificar objetos a la colección existente  ( Ng repeat within directive will not update when adding or modifying objects to t ) 
Tengo una vista de árbol que contiene objetos con matrices anidadas que estoy tratando de rellenar. Un plunker de trabajo se puede encontrar aquí. Aquí ...

0  La vista no se está refrescando con el modelo actualizado  ( View is not getting refreshed with updated model ) 
Mi vista angular no se está actualizando cuando cambia el modelo. El modelo se está cambiando en el evento "Onblur" en la Directiva. by ="min"0 Mi model...

850  AngularJS: Evite el error $ Digest en el progreso al llamar a $ alcance. $ Aplicar ()  ( Angularjs prevent error digest already in progress when calling scope apply ) 
Estoy descubriendo que necesito actualizar mi página a mi alcance manualmente más y más desde que construya una aplicación en angular. La única forma en que...

5  ¿Cómo verificar si los ciclos de digestión se han estabilizado (AKA "tiene una compilación terminada angular?")  ( How to check if the digest cycles have stabilized aka has angular finished com ) 
tl; DR: La pregunta inicial fue "¿Cómo activar una devolución de llamada cada ciclo de resumen?" Pero la pregunta subyacente es mucho más interesante y, dad...

13  ¿Qué es la impresión regular de interpretación en angular?  ( What is regularinterceptedexpression in angular ) 
Durante la depuración de mi aplicación NG, he descubrido que la mayoría de la hora de $ Digest toma la impresión de interpresión regular. La pregunta es, ¿qué...

0  $ alcance. $ Aplicar después de $ alcance. $ en  ( Scope apply after scope on ) 
Estoy usando el $ STRIGHTCAST PATRYING OUTINED AQUÍ a los controladores para escuchar el estado de su servicio. Por ejemplo, aquí escucho el estado ocupad...

0  Cómo activar la función después de que Dom Markup se carga en la aplicación de estilo angular, excepto la carga  ( How to trigger the function after dom markup is loaded in angular style applicat ) 
Necesito mostrar una simple tiempo de actualidad con un-Aplicación a base de angular. Tallo ha probado una demostración. En la función de carga del cuerpo e...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos