AngularJs销毁广播和发射监听器

15 浏览
0 Comments

AngularJs销毁广播和发射监听器

我在我的angularjs应用中使用$broadcast和$emit。这是我注册$emit函数的代码：

this.scope.$emit('changeTime', {
  currentTime: this.currentTime
});

在另一个控制器中，我监听这个emit函数以返回对象：

this.scope.$on('changeTime', (event, args) => {
  console.log(args.currentTime);
});

一切都正常工作。

但是这个监听器是在我的不同函数中调用的，根据不同的条件调用：

this.functionone(){
      this.scope.$on('changeTime', (event, args) => {
        console.log(args.currentTime);
      });
    }
    this.functiontwo(){
      this.scope.$on('changeTime', (event, args) => {
        console.log(args.currentTime);
      });
    }

当我调用第一个函数时，当前时间会打印在控制台上。当我的条件改变并调用另一个函数functiontwo()时，在此时我还可以看到functionone的控制台值。

这意味着当第二个函数在第一个函数之后调用时，changetime监听器被调用两次。

那么如何取消注册之前调用的changetime，以便第二次它不再出现。

0

1 答案

0 Comments

AngularJs中的destroy, broadcast和emit事件的监听器（listeners）的问题是由于没有正确注销事件监听器导致的。在AngularJs中，listeners和$watch函数会返回一个取消注册（de-registration）函数，用于注销事件监听器。因此，可以通过直接调用这个取消注册函数来注销事件。

解决方法是在需要注销事件监听器的地方调用取消注册函数。在上面的代码中，可以看到在两个函数（functionone和functiontwo）中都调用了deregisterEvents函数来注销事件监听器。deregisterEvents函数中通过判断事件监听器是否存在来决定是否调用取消注册函数来注销事件。

具体的实现代码如下：

this.functionone = function(){
  this.deregisterEvents();
  this.eventOneChangeTime = this.scope.$on('changeTime', (event, args) => {
    console.log(args.currentTime);
  });
}
this.functiontwo = function(){
  this.deregisterEvents();
  this.eventTwoChangeTime = this.scope.$on('changeTime', (event, args) => {
    console.log(args.currentTime);
  });
}
deregisterEvents(){
    //unregistering events.
    if(this.eventOneChangeTime) this.eventOneChangeTime();
    if(this.eventTwoChangeTime) this.eventTwoChangeTime();
}

通过以上的代码，我们可以正确地注销事件监听器，避免了不必要的问题。

0