在AngularJS中，如何在URL哈希上添加$ watch？

Using Angular, how can I add a watch that is fired when the hash is updated, either by my application, or when the browser updates the URL from either the URL bar or the back/forward buttons?

使用Angular，如何通过我的应用程序或浏览器从URL栏或后退/前进按钮更新URL时，如何添加更新哈希时触发的监视？

4 个解决方案

#1

$scope.$watch accepts function as the first argument, so you can do this:

$ scope。$ watch接受函数作为第一个参数，所以你可以这样做：

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

But I would recommend using events, such as $routeChangeSuccess for default router:

但我建议使用事件，例如$ routeChangeSuccess作为默认路由器：

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

or $stateChangeSuccess for ui-router

或ui-router的$ stateChangeSuccess

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

#2

$locationChangeSuccess could be better.

$ locationChangeSuccess可能会更好。

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

#3

This works too if you're okay with not using the angular $watch. Basically, you watch 'hashchange' windows event. whatever angularJS does is a wrapper around this. For example,

如果您没有使用角度$ watch，这也可以。基本上，你看'hashchange'窗口事件。无论angularJS做什么都是这个的包装。例如，

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

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

});

#4

location.hash can be updated internally by angular or externally by the user or the browser (click link in bookmarks). If it is updated internally angular runs a $scope.$apply(). If an external event updates location.hash $watch does only fire UNTIL AFTER the next $scope.$apply(), e.g. a user pushes a button within your app.

location.hash可以由角度或内部由用户或浏览器在内部更新（单击书签中的链接）。如果它在内部更新，则会运行$ scope。$ apply（）。如果外部事件更新location.hash $ watch只会在下一个$ scope之后触发UNTIL。$ apply（），例如用户按下您应用内的按钮。

If you wish to use a $watch, add an additional event listener to "hashchange" to call $apply, or add all functionality to the native DOM listener AND do not forget to call $apply(), as this is an external call.

如果您希望使用$ watch，请向“hashchange”添加一个额外的事件侦听器以调用$ apply，或者将所有功能添加到本机DOM侦听器中，并且不要忘记调用$ apply（），因为这是一个外部调用。

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

OR ...

要么 ...

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

#1