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; 
};