AngularJS Paginación con $ location.path pero no ngView reload

Question

Mi aplicación de una sola página carga una página de inicio y quiero mostrar una serie de ideas. Cada una de las ideas se muestra en un contenedor flash animado, con animaciones que se muestran para alternar entre las ideas.

Las ideas se cargan mediante $ http:

$scope.flash = new FlashInterface scope:$scope,location:$location 

$http.get("/competition.json") 
    .success (data) -> 
    $scope.flash._init data 

Sin embargo, para beneficiarse de la navegación historia y UX que deseen actualizar la barra de direcciones para mostrar la URL correcta para cada idea usando $ ubicación:

$location.path "/i/#{idea.code}" 
$scope.$apply() 

Llamo $ aplica aquí porque este evento proviene del contexto AngularJS, es decir, Flash. Me gustaría que el controlador/vista actual permanezca y que la vista no se vuelva a cargar. Esto es muy malo porque al volver a cargar la vista, el objeto flash completo se descarta y el ciclo del precargador comienza de nuevo.

He intentado escuchar por $ routeChangeStart hacer un preventDefault:

$scope.$on "$routeChangeStart", (ev,next,current) -> 
    ev.preventDefault() 
$scope.$on "$routeChangeSuccess", (ev,current) -> 
    ev.preventDefault() 

pero fue en vano. Todo el asunto sería genial si pudiera encontrar una manera de anular la recarga de la vista cuando cambie $ location.path.

Todavía estoy sintiendo las cosas a mi manera en AngularJS, ¡así que estaría contento de cualquier sugerencia sobre cómo estructurar la aplicación para lograr mi objetivo!

Answer 1

En lugar de actualizar la ruta, simplemente actualice query param con un número de página.

establecer su ruta para ignorar los cambios consulta param:

.... 
$routeProvider.when('/foo', {..., reloadOnSearch: false}) 
.... 

y en su actualización de la aplicación $location con:

... 
$location.search('page', pageNumber); 
... 

Answer 2

De this blog post:

por defecto, todos los cambios de ubicación pasan por el proceso de enrutamiento, que actualiza la vista angular.

Sin embargo, hay una forma simple de cortocircuitar esto. Relojes angulares para un cambio de ubicación (ya sea que se realice escribiendo en la barra de ubicación , haciendo clic en un enlace o estableciendo la ubicación a través de $location.path()). Cuando detecta este cambio, emite un evento , $locationChangeSuccess, y comienza el proceso de enrutamiento. Lo que hacemos es capturar el evento y restablecer la ruta a lo que era anteriormente.

function MyCtrl($route, $scope) { 
    var lastRoute = $route.current; 
    $scope.$on('$locationChangeSuccess', function(event) { 
     $route.current = lastRoute; 
    }); 
} 

Answer 3

Usted debe cargar $location a través de la inyección de dependencias y utilizando la siguiente:

$scope.apply(function() { 
    $location.path("yourPath"); 
} 

Tenga en cuenta que debe no uso de hashtags (#) durante el uso de $location.path. Esto es por compatibilidad para el modo HTML5.

Answer 4

Mi solución fue usar los $ routeChangeStart debido a que proporciona la "próxima "y" últimas "rutas, puede compararlas sin la necesidad de una variable adicional como en $ locationChangeSuccess.

La ventaja es la posibilidad de acceder a los "params" propiedad en ambas "próximos" y "últimos" rutas como next.params.yourproperty cuando se utiliza el estilo URL "/ propiedad/valor" y, por supuesto, utilizar $location.url o $location.path para cambiar la URL en lugar de $location.search() que depende del estilo de URL "? property = value".

En mi caso he utilizado no sólo para eso, sino también para prevenir la ruta para cambiar es el controlador no cambió:

$scope.$on('$routeChangeStart',function(e,next,last){ 
    if(next.$$route.controller === last.$$route.controller){ 
    e.preventDefault(); 
    $route.current = last.$$route; 
    //do whatever you want in here! 
    } 
}); 

En lo personal me siento como AngularJS deben proporcionar una forma de controlarlo, a la derecha ahora suponen que cada vez que cambie la ubicación del navegador, quiere cambiar la ruta.

Answer 5

evento El $ locationChangeSuccess es un poco de un método de fuerza bruta, pero he encontrado que el control de la ruta nos permite evitar cargar la página cuando la trayectoria de la ruta plantilla se modifica, pero vuelve a cargar la página cuando se cambia a una ruta diferente plantilla:

var lastRoute = $route.current; 
$scope.$on('$locationChangeSuccess', function (event) { 
    if (lastRoute.$$route.originalPath === $route.current.$$route.originalPath) { 
     $route.current = lastRoute; 
    } 
}); 

Agregar ese código a un controlador en particular hace que la recarga sea más inteligente.

Editar: Si bien esto hace que sea un poco más fácil, en última instancia, no me gustaba la complejidad del código que estaba escribiendo para mantener la apariencia amigable de las URL. Al final, acabo de cambiar a un parámetro de búsqueda y angular maneja mucho mejor.

Answer 6

que tenía que hacer esto, pero después de mimos a tratar de conseguir los $locationChange~ eventos para conseguir que funcione supe que en realidad se puede hacer esto en el route usando resolve.

$routeProvider.when(
    '/page', 
    { 
     templateUrl : 'partial.html', 
     controller : 'PageCtrl', 
     resolve : { 
      load : ['$q', function($q) { 
       var defer = $q.defer(); 

       if (/*you only changed the idea thingo*/) 
        //dont reload the view 
        defer.reject(''); 
       //otherwise, load the view 
       else 
        defer.resolve(); 

       return defer.promise; 
      }] 
     } 
    } 
);