Javascript 从控制器角度切换状态

我有一个网站菜单的组件。我有一个方法可以将状态从

true

切换到

false

，还有一个方法可以监听click或keypress，如果用户单击页面上除菜单之外的任何地方，它应该隐藏

我的代码如下所示：

import app from '../../bootstrap.js';
import template from './siteMenu.html';

class siteMenuController {
  constructor($element) {
    this.activeMenuClass = `${this.className}--active`;
    this.el = $element;
    this.state = false;

    this.listeners();
  }

  activateMenu(close = false) {
    if (close) {
      this.state = false;
    } else {
      this.state = !this.state;
    }
  }

  catchEvent(e) {
    if ((e.type === 'keydown' && e.keyCode === 27) || (e.type === 'click' && e.path.indexOf(this.el[0]) === -1)) {
      this.activateMenu(true);
    }
  }

  listeners() {
    document.addEventListener('keydown', (e) => { this.catchEvent(e) });
    document.addEventListener('click', (e) => { this.catchEvent(e) });
  }

  $onDestroy() {
    document.removeEventListener('keydown', (e) => { this.catchEvent(e) });
    document.removeEventListener('click', (e) => { this.catchEvent(e) });
  }
}
siteMenuController.$inject = ['$element'];

app.component('siteMenu', {
  controller: siteMenuController,
  bindings: {
    items: '<',
    className: '@'
  },
  template,
  transclude: true
});

从“../../bootstrap.js”导入应用程序；
从“/sitemunu.html”导入模板；
类siteMenuController{
构造函数（$element）{
this.activeMenuClass=`${this.className}--active`；
this.el=$element；
this.state=false；
this.listeners（）；
}
activateMenu（关闭=假）{
如果（关闭）{
this.state=false；
}否则{
this.state=！this.state；
}
}
比赛项目（e）{
如果（（e.type=='keydown'&&e.keyCode===27）| |（e.type=='click'&&e.path.indexOf（this.el[0]）===-1））{
这是。activateMenu（真）；
}
}
听众（）{
document.addEventListener（'keydown'，（e）=>{this.catchEvent（e）}）；
document.addEventListener（'click'，（e）=>{this.catchEvent（e）}）；
}
$onDestroy（）{
document.removeEventListener（'keydown'，（e）=>{this.catchEvent（e）}）；
document.removeEventListener（'click'，（e）=>{this.catchEvent（e）}）；
}
}
siteMenuController.$inject=['$element']；
应用程序组件（'站点菜单'{
控制器：siteMenuController，
绑定：{
条目：“当您使用
addEventListener
时，您必须手动运行
$scope.$apply（）
，因为它不会触发
$digest
循环。
您应该使用event.target处理此类行为我认为情况并非如此。
<nav class="{{ $ctrl.className }}" ng-class="$ctrl.state ? $ctrl.activeMenuClass : null">
  <button class="{{ $ctrl.className }}__trigger" ng-click="$ctrl.state = true">
    <span class="{{ $ctrl.className }}__trigger-line"></span>
    <span class="{{ $ctrl.className }}__trigger-line"></span>
    <span class="{{ $ctrl.className }}__trigger-line"></span>
  </button>
  <ul class="{{ $ctrl.className }}__wrapper">
    <li class="{{ $ctrl.className }}__item" ng-repeat="item in $ctrl.items">
      <a class="{{ $ctrl.className }}__link" href="#{{ item.id }}">{{ item.title }}</a>
    </li>
  </ul>
</nav>