Llamar con éxito a history.pushState () de Angular Without Inifinite Digest?

¿Hay alguna manera de llamar a history.pushState() sin que el ángulo entre en un bucle de resumen infinito?

Intento migrar mi aplicación del routing backend al routing de frontend y todas las publicaciones de stackoverflow / google no parecen tener una respuesta.

Esto es lo que hacemos en una aplicación Angular 1.2.16 basada en este comentario de github: https://github.com/angular/angular.js/issues/3924#issuecomment-48592773

 $location.url(myNewUrl); $location.replace(); $window.history.pushState(null, 'any', $location.absUrl()); 

Este código es parte de un controller. Lo estoy usando para agregar un parámetro de consulta a la url sin querer volver a cargar la página. Funciona en nuestro caso.

Recientemente me encontré con una variación de este problema y ninguna de las respuestas aquí funcionó para mí aisladamente. history.pushState fue definido, pero solo funcionó si se llama desde la console. Pude encontrar una solución al consolidar algunas de las respuestas aquí. Aquí está el código que utilicé para resolver este problema:

 // Configure $locationProvider html5Mode app.config(function($locationProvider) {{ $locationProvider.html5Mode({ enabled: true, requireBase: false, rewriteLinks: false }); }); // In controller $window.history.pushState(null, 'Page Title', '/some_new_url'); 

Estoy ejecutando Angular 1.5.5.

Pude encontrar una solución que funciona con angular 1.2.15.

La esencia de esto es agregar un atributo target a cada enlace y luego usar el service $location para cambiar la location.

Con base en el código angular actual, las tags de anclaje que tienen un atributo objective se ignoran (tenga en count que esta solución puede romperse eventualmente).

Para hacer esto, asegúrese de que este javascript se ejecute antes de angular:

 // prevent angular from taking over link clicks until we have frontend routing $(document.documentElement).on("click","a",function(event) { var elem = $(this), target = elem.attr("target"); if(!target) { elem.attr("target","_self"); setTimeout(function() { elem.removeAttr("target"); }); } }); 

Después de eso, configure su proveedor de location para usar html5mode:

  angular.module("App", ["App.controllers"]).config([ "$locationProvider", function($locationProvider) { if (history.pushState) { $locationProvider.html5Mode(true); } } ]); 

Ahora, en su controller, inyecte el service de location y úselo normalmente:

 angular.module("App.controllers",[]).controllers("SomeController", ["$scope", "$location", function($scope,$location){ $scope.updateLocation = function() { if (history.pushState) { $location.path("/new/path/here"); } }; }]); 

Use la opción rewriteLinks en el object $ locationProvider html5Mode:

  pageModule.config(function($locationProvider) {{ $locationProvider.html5Mode({ enabled: true, requireBase: false, rewriteLinks: false }); }); 

Después, debería poder utilizar el service $ location correctamente, como por ejemplo:

  this.$location.path("/mynewpath");