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不同。因此，当您更改$rootScope.showMenu中的$routeChangeStart时，它不会影响子范围属性。相反，你应该做这样的事情：

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

并在控制器中：

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

ng-show在路线上不会改变AngularJS中的变化

1 个答案: