stateChangeStart 事件为每个控制器实例调用两次

Question

我正在尝试在angularjs中实现"通知未保存的更改"解决方案。

基本上我有一个BaseForm控制器，用于收听stateChangeStart事件。被解雇时，我会检查公司是否脏，以及当提示时，用户是否确认更改位置。如果他不这样做，我preventDefault(). 这是我用来实现此目的的代码：

this.$scope.$on('$stateChangeStart', (event, toState, toParams, fromState, fromParams) => {
let dirtyForms = this.detailForms.filter((form) => { if (form) { return form.$dirty } });
if (dirtyForms.length && !confirm("Are you sure to leave this page?")) {
event.preventDefault();
}                
});

但是，由于某种原因，如果我导航到由同一控制器实例管理的状态，则事件将触发两次，因此我会收到两次提示。

为什么会这样？我该如何预防？

Answer 1

我没有尝试过这个，但这是我们使用的一种模式。像您一样注册您的$stateChangeStart(为了简单起见，我缩短了它(，但稍作修改：

const deregisterStateChangeStart =
this.$scope.$on('$stateChangeStart', this.foo.bind(this));

我假设您在控制器的 $onInit(( 中执行此操作。然后添加以下内容：

this.$scope.$on('$destroy', () => {
deregisterStateChangeStart();
});