Verstecke eine Div ohne Duplizierung Code

Question

Ich habe ein Pop-out-Menü in einem div.

Ich kontrolliere das Öffnen und Schließen des div mit: ng-click="showNavMenu = !showNavMenu".

Jedoch für jeden Link, wo ich dies verwende, muss ich diesen Code duplizieren, so dass das Menü tatsächlich schließt, sobald die neue Ansicht geladen ist.

Ich möchte diesen Code Doppelarbeit vermeiden - alle Ideen auf, was ich tun kann:

<div class="navMenu" ng-show="showNavMenu"> 
     <ul> 
     <li><a href="/about" ng-click="showNavMenu = !showNavMenu">About</a></li> 
     <li><a href="/privacy" ng-click="showNavMenu = !showNavMenu">Privacy</a></li> 
     <li><a href="/contact" ng-click="showNavMenu = !showNavMenu">Contact Us</a></li> 
     </ul> 
</div> 

Answer 1

Verwenden Sie die Funktion statt <li><a href="/about" ng-click="toggleMenu()">About</a></li>

Und diese Funktion in der Steuerung definieren

$scope.toggleMenu = function() { 
    $scope.showNavMenu = !$scope.showNavMenu; 
} 

Answer 2

Wie wäre es, wenn Sie den ng-Klick auf das übergeordnete Element setzen? ul? Ich bin nicht besonders versiert in den Event-Bubbling/Propagation-Regeln von eckle - es könnte einige Optimierungen geben, die Sie an Ihrer Funktion oder dem ng-click-Attribut vornehmen müssen. Oder es könnte einfach funktionieren.

function toggleMenu() { 
    $scope.showNavMenu = !$scope.showNavMenu 
} 

----- 

<ul ng-click="toggleMenu()"> 

Answer 3

ich mit der Bewegung des Navigationslogik auf den Controller-Code gehen würde, scheint die sauberste Lösung für mich.

<div class="navMenu" ng-show="showNavMenu"> 
    <ul> 
    <li><a href ng-click="navigate('about')">About</a></li> 
    <li><a href ng-click="navigate('privacy')">Privacy</a></li> 
    <li><a href ng-click="navigate('contact')">Contact Us</a></li> 
    </ul> 
</div> 

Und in Ihrem Controller: So Ihr Markup aussehen würde

$scope.navigate = function(path) { 
    $scope.showNavMenu = false; 
    window.location.href = '/' + path; //better navigate via router 
}