To jest kolejne pytanie do tego pytania:Wejście AngularJS z foksem zabija filtr ng-repeat listy

Zasadniczo mój kod używa AngularJS do wyskakiwania div (szuflady) po prawej stronie w celu filtrowania listy rzeczy. W większości przypadków ten interfejs jest zablokowany, więc kliknięcie tego bloku blokującego zamyka szufladę. Ale w niektórych przypadkach nie blokujemy interfejsu użytkownika i musimy pozwolić użytkownikowi na kliknięcie poza szufladą, aby anulować wyszukiwanie lub wybrać coś innego na stronie.

Moja pierwsza myśl polegała na dołączeniu programu obsługi okien window.onclick, gdy szuflada się otworzy i jeśli cokolwiek zostanie kliknięte poza szufladą, powinno zamknąć szufladę. W ten sposób zrobię to w czystej aplikacji JavaScript. Ale w Angular jest to trochę trudniejsze.

Oto jsfiddle z próbką, którą oparłem na przykładzie jsBin @ Yoshi:http://jsfiddle.net/tpeiffer/kDmn8/

Odpowiedni fragment kodu z tej próbki znajduje się poniżej. Zasadniczo, jeśli użytkownik kliknie poza szufladą, wywołam $ scope.toggleSearch, tak aby $ scope.open został przywrócony do wartości false.

Kod działa i nawet jeśli $ scope.open przechodzi z true na false, nie modyfikuje DOM. Jestem pewien, że ma to coś wspólnego z cyklem życia zdarzeń lub może podczas modyfikowania $ scope (ponieważ jest to oddzielne wydarzenie), że jest to kopia, a nie oryginał ...

Ostatecznym celem będzie to, aby była to dyrektywa zapewniająca ostateczną możliwość ponownego wykorzystania. Gdyby ktoś mógł wskazać mi właściwy kierunek, byłbym wdzięczny.

$scope.toggleSearch = function () {

    $scope.open = !$scope.open;

    if ($scope.open) {
        $scope.$window.onclick = function (event) {
            closeSearchWhenClickingElsewhere(event, $scope.toggleSearch);
        };
    } else {
        $scope.$window.onclick = null;
    }
};

i

function closeSearchWhenClickingElsewhere(event, callbackOnClose) {

    var clickedElement = event.target;
    if (!clickedElement) return;

    var elementClasses = clickedElement.classList;
    var clickedOnSearchDrawer = elementClasses.contains('handle-right') 
        || elementClasses.contains('drawer-right') 
        || (clickedElement.parentElement !== null 
            && clickedElement.parentElement.classList.contains('drawer-right'));
    if (!clickedOnSearchDrawer) {
        callbackOnClose();
    }

}