javascript - Angular，ui-router "binding"到 url，同样无需刷新

Question

我有一个奇怪的问题，我只是想看看这是否可能。

我正在寻找的是一种在用户使用应用程序时更新 url 的方法 - 当他们单击页面上的几个不同项目时，我希望它几乎“绑定(bind)”到我设置的 urlParameters。所以我喜欢 -

 url: 'app/:mod1/:mod2',

在我的 route ，当用户与页面上的按钮交互时，其中 2 个按钮绑定(bind)到 Controller 中的范围，可以说

 $scope.mod1 = true;
 $scope.mod2 = false;

然后，当用户与它们交互时，它会相应地更改 url。因此，如果他们单击按钮并设置 mod1 = false 和 mod2 = true，则 url 将更改为

/app/false/true

这里有一个问题 - 我希望能够在不每次刷新页面的情况下完成此操作(如果一开始就可能的话)。这个想法是为了让用户可以复制 URL 并在以后使用它 - 有点像保存状态。关于此事的任何建议都将非常有值(value)，因为我不知道该去哪里寻找。感谢您花时间阅读!

Answer 1

您可以使用 $location.search() 来读取和写入 URL 属性。它们将显示为参数。对于你的情况

http://site/page?mod1=true&mod2=false

要更新您需要执行的值:

$location.search({mod1: $scope.mod1, mod2: $scope.mod2});

在您的 Controller 中，当页面首次加载时，您会读回这些值:

$scope.mod1 = $location.search().mod1;
$scope.mod2 = $location.search().mod2;