javascript - property - ng-if

En AngularJS, ¿cómo agrego un $ watch en el hash de la URL?

Question

Con Angular, ¿cómo puedo agregar un reloj que se dispara cuando se actualiza el hash, ya sea por mi aplicación o cuando el navegador actualiza la URL desde la barra de URL o los botones de avance / retroceso?

Answer 1

Esto también funciona si estás de acuerdo con no usar el reloj angular $. Básicamente, usted ve el evento de windows ''hashchange'' . Lo que haga angularJS es una envoltura alrededor de esto. Por ejemplo,

$($window).bind(''hashchange'', function () {
// Do what you need to do here like... getting imageId from #
var currentImageId = $location.search().imageId;
});

Answer 2

location.hash se puede actualizar internamente de forma angular o externamente por el usuario o el navegador (haga clic en el enlace en los marcadores). Si se actualiza internamente, angular ejecuta un $ scope. $ Apply (). Si un evento externo actualiza location.hash $ watch solo se dispara HASTA DESPUÉS del siguiente $ scope. $ Apply (), por ejemplo, un usuario presiona un botón dentro de su aplicación.

Si desea usar $ watch, agregue un detector de eventos adicional a "hashchange" para llamar a $ apply, o agregue toda la funcionalidad al oyente nativo de DOM Y NO se olvide de llamar a $ apply (), ya que se trata de una llamada externa.

window.addEventListener("hashchange", function(){ $scope.$apply(); }, false);

O ...

window.addEventListener("hashchange", function(){ me._locationHashChanged(); $scope.$apply(); }, false);

Answer 3

$locationChangeSuccess podría ser mejor.

$scope.$on(''$locationChangeSuccess'', function(event, newUrl, oldUrl){
// TODO What you want on the event.
});

Answer 4

$scope.$watch acepta la función como primer argumento, por lo que puede hacer esto:

$scope.$watch(function () {
return location.hash
}, function (value) {
// do stuff
});

Pero recomendaría el uso de eventos , como $routeChangeSuccess para el enrutador predeterminado :

$scope.$on("$routeChangeSuccess", function () {})

o $stateChangeSuccess para ui-router

$scope.$on("$stateChangeSuccess", function () {})