AngularJS在路线变更前确认

Question

是否可以监听路由更改和onwindowunload两者以确认页面离开而不保存更改？

用例:

• 用户单击" 返回"
• 用户在浏览器中按下后退按钮
• 用户键入不同的URL

如果用户点击"取消",则停止更改页面/路线.

我见过几个不同的例子,但没有一个做得很好.

Answer 1

演示:http://plnkr.co/edit/Aq8uYg

在演示中,如果您更改输入值,则会在尝试返回时注意到.

如果未确认更改,请收听$locationChangeStart并使用event.preventDefault()取消位置更改.

该方法具有以下优点$route.reload():当前控制器和模型不会被重新实例化.因此,所有变量都保持不变,因为用户单击"返回"按钮.

Answer 2

你会发现这$locationChangeStart是一个你可以监听的事件来检测路线变化.

尝试类似的东西

$rootScope.$on('$locationChangeStart', function (event, next, current) {
  /* do some verification */
});

$route.reload() 将阻止路线改变通过.

用户点击或更改网址等之间的区别不会产生影响.由于浏览器在您更改网址时不会重新加载任何资源,因此#它仍然包含在您的角度逻辑中.这意味着所有这些方法都应该触发$locationChangeStart事件.

@Jon指出这项$route服务肯定会对你有用.该.reload()方法将阻止路由更改完成,但$route如果您查看它,您可以使用该服务做更多的事情 - 请参阅文档.