컨트롤러의 각도 전환 상태

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> 

내 문제입니다 - 메뉴를 닫기 위해 - - 트리거를 클릭하면 아무것도 클릭, 좋은 작품 아무튼 ' t (하지만 this.state 변경, 콘솔에서 추적).

어떻게해야합니까?

Answer 1

addEventListener을 사용하는 경우 루프를 트리거하지 않으므로 $scope.$apply()을 수동으로 실행해야합니다.