多個條件離子標題欄的重疊離子內容

這段代碼工作完全正常：

<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類手動不能解決問題。班級被角/離子去除。我在做什麼錯？應該可以設置不同的標題，不是嗎？感謝您的幫助提前。

來源

2016-03-03 wtfzn

變化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>

來源

2016-03-03 12:36:33 beaver

我完全不明白爲什麼，但它的工程！：d – wtfzn

多個條件離子標題欄的重疊離子內容

回答

相關問題