Question

我正在使用角度ui-router。在某些情况下，在我的应用程序中，我打开弹出窗口而不更改URL。我希望能够在单击浏览器后退按钮时关闭此弹出窗口 - 在移动设备上。

有没有办法（或没有）ui-router？

修改

更具体的解释：我有一个菜单，它是一个弹出窗口，它可以一直打开。我希望在移动设备上使用浏览器后退按钮关闭此菜单。如果我在打开菜单时更改了网址，一切都应该有效。但有没有办法定义一个为当前网址添加后缀的状态？

例如，如果我有两个网址：

的myapp /第1页
的myapp /第2页

然后打开菜单将切换到＆＃34; menu＆＃34;将更改网址的状态：

的myapp /第1页/菜单
的myapp /第2页/菜单

如果这不可能，那么我想打开菜单而不更改网址，仍然可以使用浏览器后退按钮关闭菜单。

Answer 1

关于问题的第一部分，我不知道如何动态地将状态变为另一个状态的子状态。我使用的解决方法是正常地在配置块中显式定义所有子状态，但重用相同的模板/控制器。当然，只有事先了解所有潜在的儿童状态，才有效。

对于后退按钮检测，您可以侦听$ locationChangeStart和$ stateChangeStart。在内部更改状态时，首先触发$ stateChangeStart，然后触发位置更改。当外部更改状态时（例如，通过后退按钮），$ locationChangeStart首先发生。以下是如何利用它的示例：

var state = $state.current.name;
var location = $location.absUrl();

var stateChangingExternally = false;
var stateChangingInternally = false;

var offLocationChangeStartEvt = $scope.$on('$locationChangeStart', function(evt, to, from) {
  if (from === location) {
    stateChangingExternally = !stateChangingInternally;
    offLocationChangeStartEvt();
  }
});

var offStateChangeStartEvt = $scope.$on('$stateChangeStart', function(evt, to, toParams, from) {
  if (from.name === state) {
    stateChangingInternally = !stateChangingExternally;
    if (stateChangingExternally) {
      evt.preventDefault();
      // do whatever here
    }
    offStateChangeStartEvt();
  }
});

浏览器后退按钮，无需更改URL - 使用ui-router

1 个答案: