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

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

2014-02-25 John

不知道的哈希本身，而是我一直检查的方法是'$ rootScope。在$（ '$ routeChangeStart'，函数（事件，下一，current）{}）;' –

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

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

但我会建议using events，如$routeChangeSuccess为default router：

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

或$stateChangeSuccess为ui-router

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

来源

2014-02-25 01:30:11

'$ routeChangeSuccess'不会在只有散列发生变化时触发。 –

检查哈希变化的scope.watch建议工作得非常好（当然，ngNewRouter也一样，因为它不依赖于路由器）。 –

$ scope。$ watch（）不会在我更改网址哈希 –

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

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

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

});

来源

2014-02-25 01:52:50 Jin

我想在$ window中有一个错误。它也不是交叉浏览器的解决方案。 – tylik

这适用于角度摘要逻辑之外，因此您必须在回调中添加'$ scope。$ apply（）'（如果有任何模型更改）。如果这对你的目的无关紧要，那么这是一个很好的解决方案。 –

由于混合了jQ和Angular而不是“角度方式”，这是各种各样的错误，因为这种方法没有包含Angular包装和摘要。上面的答案给出了如何在Angular中正确执行此操作的可靠示例。 – tpartee

$locationChangeSuccess可能会更好。

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

来源

2015-04-22 13:23:39

当散列发生变化时，根本没有被解雇 –

@PhamHuyAnh它正在为我工作，而我只是在项目中使用了Angular 1.2.21。确保你注入'$ location'。如果你不这样做，它将无法工作散列更改事件观察 –

我也在1.2.x上，这正好适用于散列更改。比$ watch更少的开销 – flybear

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

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

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

或者......

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

来源

2017-06-08 07:05:49 cat

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

回答

相关问题