多个条件离子标题栏的重叠离子内容

这段代码工作完全正常：

<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

多个条件离子标题栏的重叠离子内容

回答

相关问题