角度 - 從控制器切換狀態

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