javascript - Angular - 从 Controller 切换状态

Question

我的网站菜单有一个组件。我有一种方法可以将状态从 true 切换到 false，另一种方法可以监听单击或按键，并且 - 如果用户单击页面上的任何位置，除外 菜单，它应该隐藏。

我的代码如下所示:

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
});

模板:

<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>

我的问题是 - 单击触发器效果很好，单击其他任何内容 - 用于关闭菜单 - 则不起作用(但是 this.state 发生了变化，我在控制台中跟踪了它)。

我能做什么？

Answer 1

当您使用addEventListener时，您必须手动运行$scope.$apply()，因为它不会触发$digest循环.