Ionic单视图隐藏页脚问题求助：ng-hide无效

看起来你遇到的核心问题是作用域隔离导致ng-hide没生效——你的页脚在index.html（根作用域），而ng-hide="query"是在Launchpad.html的子作用域里，子作用域的变量无法直接影响根作用域的元素。下面给你几个可靠的解决方案：

方案一：利用Ionic视图生命周期事件（推荐） #

通过监听视图的进入/离开事件，全局控制页脚的显示状态，这种方式最贴合Ionic的视图逻辑：

1. 首先在index.html里给页脚绑定一个根作用域的变量：

<ion-footer-bar class="bar-stable" ng-show="showFooter">
  <!-- 你的页脚内容 -->
</ion-footer-bar>

2. 在Launchpad视图的控制器里，监听视图生命周期事件，切换showFooter的值：

.controller('LaunchpadCtrl', function($scope, $rootScope) {
  // 进入Launchpad视图前，隐藏页脚
  $scope.$on('$ionicView.beforeEnter', function() {
    $rootScope.showFooter = false;
  });

  // 离开Launchpad视图前，恢复显示页脚
  $scope.$on('$ionicView.beforeLeave', function() {
    $rootScope.showFooter = true;
  });
})

3. 别忘了在Launchpad.html里指定控制器：

<ion-view hide-nav-bar="true" ng-controller="LaunchpadCtrl">
  <ion-content class="padding uaContent">
    <search-results></search-results>
    <div ng-hide="query">
      <h2 class="card header">...</h2>
      <!-- 其他视图内容 -->
    </div>
  </ion-content>
</ion-view>

方案二：通过路由状态直接判断 #

如果你的项目用了ui-router，可以直接在页脚判断当前路由状态，不需要额外控制器逻辑：

<ion-footer-bar class="bar-stable" ng-if="$state.current.name !== 'launchpad'">
  <!-- 你的页脚内容 -->
</ion-footer-bar>

注意要确保$state已经注入到根作用域，或者在index.html的控制器里注入$state。

为什么原来的ng-hide没效果？ #

因为index.html的页脚属于根作用域，而Launchpad.html里的ng-hide="query"是在视图的子作用域中。AngularJS的子作用域会继承根作用域，但如果你直接在子作用域里赋值query，会创建一个子作用域自己的变量，不会修改根作用域的同名变量——这就导致页脚绑定的变量根本没被改变，自然不会隐藏。

内容的提问来源于stack exchange，提问作者Curtis Boylan