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循环。

Angular - 来自控制器的切换状态

1 个答案: