AngularJS && Javascript, tworzenie addEventListenera który zmieni wartość zmiennej $scope

Question

Cześć, mam pytanie istnieje możliwość stworzenia takiego addEventListenera, który po kliknięciu w okno przeglądarki gdziekolwiek niż w menu, zamknie je(czyli zmieni wartość $scope.nestedMenu na false)? Albo by nie zmieniał flagi na false a jakoś je zamykał ? Ktoś ma jakiś pomysł i mógłby mi to wytłumaczyć, jak najlepiej to zrobić? Przykład takiego menu wyświetlanego :

 

https://codepen.io/anon/pen/pamzqa?editors=1111

Answer 1

Na myśl przychodzi mi takie rozwiązanie (załóżmy, że menu ma klasę "menu")

window.addEventListener('click', function(e) {
    var clickOutsideMenu = !e.target.matches('.menu, .menu *')
    if (clickOutsideMenu) {
        console.log('close menu')
    }
})

Kwestia tylko zintegrowania tego kodu z angularem.

Comments

co oznacza zapis .menu *

---

W tym kontekście: dowolny potomek .menu

---

Hej np strona o nazwie tablica, jest stworzona z kilku komponentów i dyrektyw. Żeby uniknąć budowania złożonego serwisu przestawiającego odpowiednio flagi w odpowiednim menu, mogę po prostu usuwać poprzez javascript && addeventlistenera klase active tym menu ? Czy takie rozwiązanie jest nie za bardzo ?

---

Ciężko mi powiedzieć, nie znam angularJS (to już technologia na wymarciu). Nie ma on jakiegoś własnego sposobu na podpinanie eventów? Jeżeli Twoje rozwiązanie działa, i ułatwia sprawę, to nie widzę przeszkód.

---

Z tego, co pamiętam to niestety w AngularJS dyrektywa ng-click nie wspiera event delegation (a tym można obsłużyć tzw. "off click", czyli zamykanie okienka klikając poza jego obszar), więc pozostaje propozycja od @niezalogowany.

Natomiast, jeśli już chcesz łapać zdarzenia samodzielnie, to wrzuć kod w dyrektywę i użyj jej na elemencie. Customowa obsługa DOMu to zadanie właśnie dla dyrektyw.

https://docs.angularjs.org/guide/directive

What are Directives?

At a high level, directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS's HTML compiler ($compile) to attach a specified behavior to that DOM element (e.g. via event listeners), or even to transform the DOM element and its children.

@niezalogowany:

to już technologia na wymarciu 

Nie smuć mnie, proszę - za dużo czasu poświęciłem na naukę tego dinozaura... Wsparcie jeszcze jest. :) Choć oczywiście, nie jest to już "atrakcyjny" framework.

https://github.com/angular/angular.js/commits/master

https://github.com/angular/angular.js/releases