角度 - 从控制器切换状态

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