В AngularJS, как добавить $watch в хеш URL?

Ответ 1

$scope.$watch принимает функцию как первый аргумент, поэтому вы можете сделать это:

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

Но я бы рекомендовал использовать события, например $routeChangeSuccess для маршрутизатора по умолчанию:

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

или $stateChangeSuccess для ui-router

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

Ответ 2

$locationChangeSuccess может быть лучше.

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

Ответ 3

Это тоже работает, если вы не используете часы angular $. В основном, вы смотрите событие 'hashchange. любой угловой JS делает обертку вокруг этого. Например,

$($window).bind('hashchange', function () {

    // Do what you need to do here like... getting imageId from #
    var currentImageId = $location.search().imageId;

});

Ответ 4

location.hash может быть обновлено внутри angular или извне пользователем или браузером (щелкните ссылку в закладках). Если он обновляется внутри angular, он запускает $scope. $Apply(). Если внешнее событие обновляет location.hash $watch, срабатывает только UNTIL AFTER после следующей $scope. $Apply(), например. пользователь нажимает кнопку в вашем приложении.

Если вы хотите использовать $watch, добавьте дополнительный прослушиватель событий к "hashchange" для вызова $apply или добавьте все функции в собственный DOM-прослушиватель. И не забудьте вызвать $apply(), поскольку это внешний вызов.

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

ИЛИ...

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