Question

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

在运行良好的大部件中：我可以将链接发送给其他人，如果我按照从我的表页面引出的链接，我可以使用浏览器的后退按钮，最后使用相同的表格像以前一样设置。

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

我不希望因为状态变化而发生完全重新加载，但我仍然希望得到注意。

我尝试了以下注意事项：

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

但是，如果我操纵URL以使someStateThatMightChange发生变化，则不会发生任何变化。警报未显示。观察stateParameters的正确方法是什么？

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事件？当网址被更改时，它会被调用：

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

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

设置reloadOnSearch = false时，如何在angular-ui-router中查看状态参数

2 个答案: