Question

这是我的代码...当我运行程序时，我得到空白页面我检查了URL路由我不知道哪里是错误。请找出错误并告诉我。

这是主页。的index.html

<!DOCTYPE html>
    <html ng-app="starter">
      <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="lib/ionic/css/ionic.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">
        <link rel="stylesheet" href="css/bootstrap.css">
        <script src="js/jquery.js"></script>
        <script src="js/bootstrap.js"></script>
        <script src="lib/ionic/js/ionic.bundle.js"></script>
        <script src="cordova.js"></script>
        <script src="js/app.js"></script>
      </head>
      <body  ng-controller="MainCtrl">
      <ion-nav-view name="menuContent"></ion-nav-view>
      </body>
    </html>

这是我的脚本页面 App.js

angular.module('starter', ['ionic'])

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

  $stateProvider
    .state('event', {
      url: "/event",
      abstract: true,
      templateUrl: "templates/side-menu.html",
      controller:'MainCtrl'
    })
    .state('event.home', {
      url: "/home",
      views: {
        'menuContent' :{
          templateUrl: "templates/home.html"
        }
      }
    })
    .state('event.profile', {
      url: "/profile",
      views: {
        'menuContent' :{
          templateUrl: "templates/profile.html"
        }
      }
    })
  $urlRouterProvider.otherwise("/event");
})

.controller('MainCtrl', function($scope, $ionicSideMenuDelegate) {
  $scope.toggleLeft = function() {
    $ionicSideMenuDelegate.toggleLeft();
  };
})

这是我的侧边菜单页面侧menu.html

<ion-side-menus>
        <ion-side-menu-content> 
          <ion-header-bar id="header" class="bar-positive">
                <button menu-toggle="left" ng-click = "toggleLeft()" class = "button button-icon icon ion-navicon-round"></button>
                <ul id="header-right">
                  <li><span class="glyphicon glyphicon-print"></span></li>
                  <li><span class="glyphicon glyphicon-search"></span></li>
                </ul>
          </ion-header-bar>
          <div class="tabs-striped tabs-top tabs-background-positive tabs-color-light">
            <div class="tabs" id="tabs">
              <a class="tab-item" href="#">
                 <i class="glyphicon glyphicon-globe"></i>
              </a>
              <a class="tab-item" href="#">
                <i class="glyphicon glyphicon-circle-arrow-down"></i>
              </a>
              <a class="tab-item" href="#">
               <i class="glyphicon glyphicon-comment"></i>
              </a>
              <a class="tab-item" href="#">
                <i class="glyphicon glyphicon-user"></i>
              </a>
            </div>
        </div>
        </ion-side-menu-content>
         <ion-side-menu side="left">
          <ion-header-bar class="bar-energized">
            <h2 class="title">settings</h4>
          </ion-header-bar>  

          <ion-content  class="left-menu">
            <ul class="list">
              <a href="#/event/home" class="item" menu-close>home</a>
              <a href="#/event/profile" class="item" menu-close>profile</a>
            </ul>
          </ion-content>
        </ion-side-menu>
</ion-side-menus>

url重新路由在离子框架中给出空白页

0 个答案: