コードを複製しないでDivを隠す

Question

divにポップアウトメニューがあります。

divの開閉は、ng-click="showNavMenu = !showNavMenu"を使用して制御しています。

ただし、私がこれを使用するリンクごとに、新しいビューが読み込まれると、メニューが実際に閉じるようにそのコードを複製する必要があります。

私は、このコードの重複を避けるしたいのですが - 私は何ができるか上の任意のアイデア：

<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

利用機能の代わりに <li><a href="/about" ng-click="toggleMenu()">About</a></li>

をし、コントローラにこの関数を定義

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

Answer 2

ng-clickを親に置くのはどうですか？ul？私は、角度のイベントのバブリング/伝播のルールに精通していないので、関数やng-click属性にいくつか修正が必要な場合があります。それとも、うまくいくかもしれません。

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

----- 

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

Answer 3

ナビゲーションロジックをコントローラコードに移動すると、私にとっては最もクリーンな解決策になります。

​​

そして、あなたのコントローラ内部：だからあなたのマークアップは次のようになり

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