Question

我试图通过实现Ionic Ion Drawer来改变Ionic 1.3中侧面菜单的默认样式。在为android构建应用程序时，它只给了我一个空白页面。控制台日志中也没有错误。有什么想法吗？

menu.html

<ion-side-menus enable-menu-with-back-views="false" ng-controller="drawerCtrl">
  <ion-side-menu-content class="custom_menu">
    <ion-nav-bar class="bar bar-header bar-assertive">
      <ion-nav-back-button>
      </ion-nav-back-button>

      <ion-nav-buttons side="left">
        <button class="button icon ion-navicon " menu-toggle="left">
        </button>
      </ion-nav-buttons>
    </ion-nav-bar>
    <ion-nav-view name="menuContent"></ion-nav-view>
  </ion-side-menu-content>

  <drawer side="left">
      <ion-content style="padding-top:2.4em">
        <h2>Menu</h2>
        <button ng-click="closeDrawer()">Close</button>
        <ion-list>
          <ion-item menu-close href="#/app/search">Friends</ion-item>
          <ion-item menu-close href="#/app/search">Favorites</ion-item>
          <ion-item menu-close href="#/app/playlist">Search</ion-item>
        </ion-list>
      </ion-content>
   </drawer>
   <ion-pane>
      <ion-content>
        <button ng-click="openDrawer()">Open</button>
      </ion-content>
   </ion-pane>  

</ion-side-menus>

的index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <link rel="stylesheet" type="text/css" href="lib/ionic/css/ionic.min.css">
    <link rel="stylesheet" type="text/css" href="dist/css/ionic.material-design-lite.css">

    <link rel="stylesheet" href="css/ionic.contrib.drawer.css">

    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="dist/js/ionic.material-design-lite.bundle.js"></script>
    <script src="lib/ngCordova/dist/ng-cordova.js"></script>  

    <script src="js/ionic.contrib.drawer.js"></script>

    <script src="cordova.js"></script>
    <!-- app's js -->
    <script src="js/chartjs/dist/Chart.js"></script>
    <script src="js/angularchart/dist/angular-chart.min.js"></script>

    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/services.js"></script>


    <script src="js/AudioSampleLoader.js"></script>    

    <script src="js/app.js"></script>
    <style>
        .my-amazing-header {
            background-color: black;
            color: white;
        }
        .my-amazing-header::before {
            background: url('http://ionicframework.com/img/docs/delorean.jpg') center / cover;
            content: ' ';
            position: absolute;
            top: -2px;
            right: -2px;
            bottom: -2px;
            left: -2px;
            opacity: 0.8;
            z-index: -1;
            filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="2" /></filter></svg>#filter');
            -webkit-filter: blur(2px);
            filter: blur(2px);
        }
    </style>
    <style>
      drawer {
        background-color: #222;
      }
      drawer h2 {
        color: #fff;
        margin-top: 40px !important;
        margin-left: 15px;
        font-weight: 200;
      }
      .item {
        background: none;
        color: #fff;
      }
      .item:first-child {
        border-top: 0px;
      }
      .item:last-child {
        border-bottom: 0px;
      }
    </style>    

</head>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <link rel="stylesheet" type="text/css" href="lib/ionic/css/ionic.min.css">
    <link rel="stylesheet" type="text/css" href="dist/css/ionic.material-design-lite.css">

    <link rel="stylesheet" href="css/ionic.contrib.drawer.css">

    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="dist/js/ionic.material-design-lite.bundle.js"></script>
    <script src="lib/ngCordova/dist/ng-cordova.js"></script>  

    <script src="js/ionic.contrib.drawer.js"></script>

    <script src="cordova.js"></script>
    <!-- app's js -->
    <script src="js/chartjs/dist/Chart.js"></script>
    <script src="js/angularchart/dist/angular-chart.min.js"></script>

    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/services.js"></script>


    <script src="js/AudioSampleLoader.js"></script>    

    <script src="js/app.js"></script>
    <style>
        .my-amazing-header {
            background-color: black;
            color: white;
        }
        .my-amazing-header::before {
            background: url('http://ionicframework.com/img/docs/delorean.jpg') center / cover;
            content: ' ';
            position: absolute;
            top: -2px;
            right: -2px;
            bottom: -2px;
            left: -2px;
            opacity: 0.8;
            z-index: -1;
            filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="2" /></filter></svg>#filter');
            -webkit-filter: blur(2px);
            filter: blur(2px);
        }
    </style>
    <style>
      drawer {
        background-color: #222;
      }
      drawer h2 {
        color: #fff;
        margin-top: 40px !important;
        margin-left: 15px;
        font-weight: 200;
      }
      .item {
        background: none;
        color: #fff;
      }
      .item:first-child {
        border-top: 0px;
      }
      .item:last-child {
        border-bottom: 0px;
      }
    </style>    

</head>
<body class="platform-android use-material-icons" ng-app="starter">

    <ion-nav-view></ion-nav-view>

</body>
</html>

app.js

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services','ngCordova','chart.js','ionic.contrib.drawer'])

.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.styleDefault();
    }
  });
})

.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider

    .state('app', {
      url: "/app",
      abstract: true,
      templateUrl: "templates/menu.html",
      controller: 'DashCtrl'
    })
        .state('app.playlist', {
          url: "/playlist",
          views: {
            'menuContent' :{
              templateUrl: "templates/playlist.html",
              controller: 'DashCtrl'
            }
          }
        });


$urlRouterProvider.otherwise("/app/playlist");
});

离子覆盖菜单在Ionic 1.3中无效

0 个答案: