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
23
$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
16
$locationChangeSuccess could be better.
$ locationChangeSuccess可能会更好。
$scope.$on('$locationChangeSuccess', function(event, newUrl, oldUrl){
// TODO What you want on the event.
});
#3
7
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
1
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
23
$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
16
$locationChangeSuccess could be better.
$ locationChangeSuccess可能会更好。
$scope.$on('$locationChangeSuccess', function(event, newUrl, oldUrl){
// TODO What you want on the event.
});
#3
7
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
1
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);