Question

我正在与标题栏斗争。

此代码段完美无缺：

   <ion-pane>
      <ion-header-bar class="bar-balanced">
        <h1 class="title">mytitle</h1>
      </ion-header-bar>
      <ion-view view-title="">
        <ion-content>
          MyContent
        </ion-content>
      </ion-view>
    </ion-pane>

我为不同的条件添加了两个额外的标题栏后，我的ion-content模块没有获得has-header类，我的标题栏与我的内容重叠。

如上所述，这会让我的设计崩溃：

   <ion-pane>
      <ion-header-bar class="bar-balanced" ng-show="conditionA()">
        <h1 class="title">mytitle1</h1>
      </ion-header-bar>
      <ion-header-bar class="bar-balanced" ng-show="conditionB()">
        <h1 class="title">mytitle2</h1>
      </ion-header-bar>
      <ion-header-bar class="bar-balanced" ng-show="conditionC()">
        <h1 class="title">mytitle3</h1>
      </ion-header-bar>
      <ion-view view-title="">
        <ion-content>
          MyContent
        </ion-content>
      </ion-view>
    </ion-pane>

手动设置has-header类无法解决问题。该类通过角度/离子去除。我究竟做错了什么？它应该可以设置不同的标题，不应该吗？感谢您的帮助。

Answer 1

将ng-show更改为ng-if并且有效：

（P.S。：全屏查看摘录）

angular.module('ionicApp', ['ionic'])
 
.controller('AppCtrl', function($scope){
    
    $scope.head = 1;
    $scope.change = function(n) {
      $scope.head = n;
    }

});

<html ng-app="ionicApp">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
  <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>

<body ng-controller="AppCtrl" ng-init="head=1">

  <ion-pane>
    <ion-header-bar class="bar-balanced">
      <h1 class="title">mytitle1</h1>
    </ion-header-bar>
    <ion-header-bar class="bar-balanced" ng-if="head==1">
      <h1 class="title">mytitle1</h1>
    </ion-header-bar>
    <ion-header-bar class="bar-positive" ng-if="head==2">
      <h1 class="title">mytitle2</h1>
    </ion-header-bar>
    <ion-header-bar class="bar-assertive" ng-if="head==3">
      <h1 class="title">mytitle3</h1>
    </ion-header-bar>
    <ion-content >
      <ion-list>
        <ion-item>
          <button class="button button-positive button-primary" ng-click="change(1)">to head 1</button>
        </ion-item>
        <ion-item>
          <button class="button button-positive button-primary" ng-click="change(2)">to head 2</button>
        </ion-item>
        <ion-item>
          <button class="button button-positive button-primary" ng-click="change(3)">to head 3</button>
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-pane>

</body>

</html>

多条件离子头棒的重叠离子含量

1 个答案: