如何在设置reloadOnSearch=false时观察angular-ui-router中的状态参数

Question

我有一个页面显示了一个大表格，其中包含排序，过滤等功能。我将参数（要排序的列，应用哪些过滤器）"保存"到URL，以便这些内容包含在浏览器历史记录中，并且可以返回或将包含所有参数的链接发送给其他人。为了在不导致重新加载的情况下操作 URL，我将 reloadOnSearch=false 设置为我的 ui 路由器状态。

在很大程度上效果很好：我可以将链接发送给其他人，如果我点击一个远离我的表格页面的链接，我可以使用浏览器的后退按钮，并使用与以前相同的设置最终得到相同的表格。

但是，如果我在已经处于所需状态时操纵参数（搜索或状态参数，没关系）......例如，单击链接或手动编辑浏览器的地址栏，这绝对没有效果。如果我使用"后退"按钮，这甚至是正确的。URL 中的参数会更改，但视图不会更新。

我不希望因为状态参数更改而发生完全的重新加载，但我仍然希望引起注意。

我尝试了以下方法来引起注意：

$scope.$watch(function() {
  return $stateParams['someStateThatMightChange'];
}, function(newVal, oldVal) {
  if (newVal !== oldVal) {
    alert('Hey, I have been changed!');
  }
});

但是，如果纵 URL 以使someStateThatMightChange更改，则没有任何反应。警报不显示。监视状态参数的正确方法是什么？

Answer 1

你试过吗 - 例如？

$scope.$watch(function () { return $state.params.tabId; }, function (newParams, oldParams) { console.log(newParams, oldParams); if (newParams !== oldParams) { alert('Hey, I have been changed!'); } });

Answer 2

你看过$locationChangeStart事件吗？当 url 被更改时，它将被调用：

    $rootScope.$on('$locationChangeStart',function(){
        console.log('$locationChangeStart called');
    })

这可能不是一个好的解决方案，因为每当 URL 更改时都会调用它，这可能不是您想要的，但它可能会有所帮助。