ng-if /ng-show 仅在 ionic 页面加载时工作

Question

我有一个嵌套状态。

与我的应用标题相关联的视图。

看起来像这样：

<ion-view cache-view="false">
<div class="navbar-fixed-top navbar-header bar bar-header " ng-if="showHeader">
<div class="container row">

                {{ showSubHeader}}
            <div ng-if="showSubHeader" class="topPull" draggable >
            <button ng-if="showSubHeader" class="button-icon"><img src="img/topImg.jpg"></button>
                           </div>       
        </div>               

</div>
</ion-view>

现在，我希望在showSubHeader 为真时显示 div。

表达式{{ showSubHeader }}正确地从真变为假，但div没有根据值变量隐藏/显示。

有办法解决吗？

最初在页面加载时，div会相应地显示/隐藏，但当加载后变量值发生变化时，div不会隐藏。

控制器：

.controller('AppCtrl', function($scope, $rootScope, $ionicModal, $timeout, $ionicSlideBoxDelegate, $state) {

$scope.showHeader=true;
 $scope.showSubHeader=true;

  $scope.checkBill= function(){
      $scope.showSubHeader=false;
     $state.go('menu.TotalBill')

  }



})

Answer 1

把$scope.showSubHeader=false;改成$scope.showSubHeader =!$scope.showSubHeader;就好了。

看看我的例子：

var app = angular.module('app', []);
app.controller('myctrl', ['$scope', function($scope) {
  $scope.test = true;
  $scope.hidden_test = true;
  $scope.click = function() {
    $scope.hidden_test = !$scope.hidden_test;
  };
}]);

.outer {
  background: #e2e2e2;
  border: 1px solid #000000;
  .inner {
    background: #c2c2c2;
    border: 1px solid #00aa00;
    padding: 1px 0 0 25px;
  }
}

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div ng-app="app">
  <div ng-controller="myctrl">
    <div class="outer" ng-if="test">
      <p>Test</p>
      <div class="inner" ng-if="hidden_test">
        <p>Hidden Test</p>
      </div>
      <button ng-click="click()">Click</button>
    </div>
  </div>
</div>