Question

我创造了一个离子ui启动器，但我认为这些观点很糟糕。

这是我的html文件，包含2个视图：

<!DOCTYPE html>
<html >
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="http://code.ionicframework.com/1.1.0/css/ionic.min.css" rel="stylesheet">

</head>
<body ng-app="ehc">
<ion-side-menus enable-menu-with-back-views="false" delegate-handle="left">
    <!-- Left menu -->
    <ion-side-menu side="left" is-enabled="true">

            <ion-header-bar class="bar-stable">AAA</ion-header-bar>
            <ion-content>
                <div class="list">
                    <div class="item item-divider">
                        Candy Bars
                    </div>
                </div>
            </ion-content>


    </ion-side-menu>

    <ion-side-menu-content edge-drag-threshold="true" drag-content="true">
        <!-- Main content, usually <ion-nav-view> -->
        <ion-nav-bar class="bar-positive" >
            <ion-nav-title>
                <h2>hello world title</h2>
            </ion-nav-title>


            <ion-nav-buttons side="left">
                <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
            </ion-nav-buttons>
        </ion-nav-bar>

       <!--  -->

         <ion-view>
                <ion-header-bar ></ion-header-bar>
                <ion-content>

                    <div class="row">

                        <!-- COLUMN ONE NAMED VIEW -->
                        <div class="col-50">
                            <ion-nav-view name="c"></ion-nav-view>
                        </div>

                        <!-- COLUMN TWO NAMED VIEW -->
                        <div class="col-50">
                            <ion-nav-view name="d"></ion-nav-view>
                        </div>

                    </div>
                </ion-content>
            </ion-view>


    </ion-side-menu-content>

    <!-- Right menu
    <ion-side-menu side="right">
    </ion-side-menu>-->

</ion-side-menus>
<script type="text/ng-template" id="templates/c.html">
    CCCCCCC
    CCCCCCC
    CCCCCCC
    CCCCCCC
    CCCCCCC
    CCCCCCC
    CCCCCCC
    CCCCCCC
    CCCCCCC
    CCCCCCC
    CCCCCCC
    CCCCCCC
    CCCCCCC
    CCCCCCC
    CCCCCCC
    CCCCCCC
    CCCCCCC
</script>
<script type="text/ng-template" id="templates/d.html">
    DDDDDDD
    DDDDDDD
    DDDDDDD
    DDDDDDD
    DDDDDDD
    DDDDDDD
    DDDDDDD
    DDDDDDD
    DDDDDDD
    DDDDDDD
    DDDDDDD
    DDDDDDD
    DDDDDDD
    DDDDDDD
    DDDDDDD
    DDDDDDD
</script>

</body>
</html>

<script src="http://code.ionicframework.com/1.1.0/js/ionic.bundle.min.js"></script>
<script src="js/ehcapp.js"></script>

这是ehcapp.js

angular.module("ehc", ["ionic"])
.config(function ($urlRouterProvider,$stateProvider) {

  $urlRouterProvider.otherwise('/a');

  $stateProvider.state('stateA', {
    url: '/a',
    controller:function($scope,$ionicSideMenuDelegate){
      $scope.toggleLeft = function() {
        $ionicSideMenuDelegate.toggleLeft();
      };
    },
    //template:"<ion-header-bar></ion-header-bar><ion-content><h1>hello dal AngularJs</h1></ion-content>",
    views: {
      "a": {
        templateUrl: 'templates/a.html'
      },
      "b":{
        templateUrl: 'templates/b.html'
      },
      "c":{
        templateUrl:"templates/c.html"
      },
      "d":{
        templateUrl:"templates/d.html"
      }

    }
  });

  $stateProvider.state('stateB', {
    url: '/b',
    views: {
      b: {
      //  templateUrl: 'templates/b.html'
      }
    }
  });
})
.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);

    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleLightContent();
    }
  });
});

为什么身高不正确？是否有可能做出正确的观点？我做错了什么？

请帮帮我

Answer 1

            <ion-view>
                <ion-content class="has-header">
                    <div class="row">
                        <div class="col-50">
                            <div ui-view="a"></div>
                        </div>
                        <div class="col-50">
                            <div ui-view="b"></div>
                        </div>
                    </div>

                </ion-content>
            </ion-view>

我必须插入类“has-header”才能添加正确的margin-top

ionicframework错误视图中的高度

1 个答案: