ng-show不會改變AngularJS的routeChange

Question

我正在開發一個AngularJS網站，並且 mobile angular UI。

我有一個菜單欄，它會在點擊一個按鈕時顯示，當點擊其中的選項時應該關閉。但它沒有按預期工作。

我的文件：

的index.html

<div id="menuBar" ng-show="showMenu"> 
    <div class="row"> 
     <a href="#/page1"> page1</a> 
    </div> 
</div> 

JS隱藏菜單

app.controller('mainController', function ($rootScope, $scope) { 

    $rootScope.showMenu = false; 

    $rootScope.$on("$routeChangeStart", function() { 
     $rootScope.showMenu = false; 
    }); 

}); 

所以當切換到其他一些文件菜單應隱藏理想。但這並沒有發生。

Answer 1

問題在於如何顯示菜單。有了這個代碼：

<div ng-click="showMenu=!showMenu" class="btn btn-navbar"><i class="fa fa-bars"></i></div> 

更改子範圍的showMenu財產。這showMenu是不一樣的$rootScope.showMenu。因此，當您在$routeChangeStart中更改$rootScope.showMenu時，它不會影響子範圍屬性。相反，你應該做這樣的事情：

<div ng-click="toggleMenuBar()" class="btn btn-navbar"><i class="fa fa-bars"></i></div> 

和控制器：

$scope.toggleMenuBar = function() { 
    $rootScope.showMenu = !$rootScope.showMenu; 
};