将幻灯片添加到离子侧菜单启动器应用程序不起作用

时间:2015-09-26 17:23:14

标签: angularjs ionic-framework ionic

我是离子和AngularJS的新手所以怀疑我做了一些愚蠢的事情,但不能为我的生活做出什么。我正在使用离子启动器模板作为侧面菜单应用程序。我已为新家添加了另一个菜单项'页。在这个页面中,我添加了离子代码笔示例中的一些代码,用于介绍幻灯片放映。不幸的是,我只得到一个空页而不是幻灯片。

我的home.html模板如下所示:



<script id="templates/home.html" type="text/ng-template">
  <ion-view view-title="Intro">
    <ion-nav-buttons side="left">
      <button class="button button-positive button-clear no-animation" ng-click="startApp()" ng-show="!slideIndex">
        Skip Intro
      </button>
      <button class="button button-positive button-clear no-animation" ng-click="previous()" ng-show="slideIndex > 0">
        Previous Slide
      </button>
    </ion-nav-buttons>
    <ion-nav-buttons side="right">
      <button class="button button-positive button-clear no-animation" ng-click="next()" ng-show="slideIndex != 2">
        Next
      </button>
      <button class="button button-positive button-clear no-animation" ng-click="startApp()" ng-show="slideIndex == 2">
        Start using MyApp
      </button>
    </ion-nav-buttons>
    <ion-slide-box on-slide-changed="slideChanged(index)">
      <ion-slide>
        <h3>Thank you for choosing the Awesome App!</h3>
        <div id="logo">
          <img src="http://code.ionicframework.com/assets/img/app_icon.png">
        </div>
        <p>
          We've worked super hard to make you happy.
        </p>
        <p>
          But if you are angry, too bad.
        </p>
      </ion-slide>
      <ion-slide>
        <h3>Using Awesome</h3>

        <div id="list">
          <h5>Just three steps:</h5>
          <ol>
            <li>Be awesome</li>
            <li>Stay awesome</li>
            <li>There is no step 3</li>
          </ol>
        </div>
      </ion-slide>
      <ion-slide>
        <h3>Any questions?</h3>
        <p>
          Too bad!
        </p>
      </ion-slide>
    </ion-slide-box>
  </ion-view>
&#13;
&#13;
&#13;

我的app.js看起来像这样:

&#13;
&#13;
angular.module('starter', ['ionic', 'starter.controllers'])

.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.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: 'AppCtrl'
  })

// :NEW: Added stuff to show a home page
  .state('app.home', {
    url: '/home',
    views: {
      'menuContent': {
    	templateUrl: 'templates/home.html',
    	controller: 'IntroCtrl'
      }
    }
  })

  .state('app.search', {
    url: '/search',
    views: {
      'menuContent': {
        templateUrl: 'templates/search.html'
      }
    }
  })

  .state('app.browse', {
      url: '/browse',
      views: {
        'menuContent': {
          templateUrl: 'templates/browse.html'
        }
      }
    })
    .state('app.playlists', {
      url: '/playlists',
      views: {
        'menuContent': {
          templateUrl: 'templates/playlists.html',
          controller: 'PlaylistsCtrl'
        }
      }
    })

  .state('app.single', {
    url: '/playlists/:playlistId',
    views: {
      'menuContent': {
        templateUrl: 'templates/playlist.html',
        controller: 'PlaylistCtrl'
      }
    }
  });
  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/app/playlists');
});
&#13;
&#13;
&#13;

我的controllers.js看起来像这样:

&#13;
&#13;
angular.module('starter.controllers', [])

.controller('AppCtrl', function($scope, $ionicModal, $timeout) {

  // With the new view caching in Ionic, Controllers are only called
  // when they are recreated or on app start, instead of every page change.
  // To listen for when this page is active (for example, to refresh data),
  // listen for the $ionicView.enter event:
  //$scope.$on('$ionicView.enter', function(e) {
  //});

  // Form data for the login modal
  $scope.loginData = {};

  // Create the login modal that we will use later
  $ionicModal.fromTemplateUrl('templates/login.html', {
    scope: $scope
  }).then(function(modal) {
    $scope.modal = modal;
  });

  // Triggered in the login modal to close it
  $scope.closeLogin = function() {
    $scope.modal.hide();
  };

  // Open the login modal
  $scope.login = function() {
    $scope.modal.show();
  };

  // Perform the login action when the user submits the login form
  $scope.doLogin = function() {
    console.log('Doing login', $scope.loginData);

    // Simulate a login delay. Remove this and replace with your login
    // code if using a login system
    $timeout(function() {
      $scope.closeLogin();
    }, 1000);
  };
})

.controller('IntroCtrl', function($scope, $state, $ionicSlideBoxDelegate) {
  $scope.next = function() {
    $ionicSlideBoxDelegate.next();
  };
  $scope.previous = function() {
    $ionicSlideBoxDelegate.previous();
  };

  // Called each time the slide changes
  $scope.slideChanged = function(index) {
    $scope.slideIndex = index;
  };
})

.controller('PlaylistsCtrl', function($scope) {
  $scope.playlists = [
    { title: 'Reggae', id: 1 },
    { title: 'Chill', id: 2 },
    { title: 'Dubstep', id: 3 },
    { title: 'Indie', id: 4 },
    { title: 'Rap', id: 5 },
    { title: 'Cowbell', id: 6 }
  ];
})

.controller('PlaylistCtrl', function($scope, $stateParams) {
});
&#13;
&#13;
&#13;

menu.html看起来像这样:

&#13;
&#13;
<ion-side-menus enable-menu-with-back-views="false">
  <ion-side-menu-content>
    <ion-nav-bar class="bar-stable">
      <ion-nav-back-button>
      </ion-nav-back-button>

      <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-nav-view name="menuContent"></ion-nav-view>
  </ion-side-menu-content>

  <ion-side-menu side="left">
    <ion-header-bar class="bar-stable">
      <h1 class="title">Left</h1>
    </ion-header-bar>
    <ion-content>
      <ion-list>
        <ion-item menu-close ng-click="login()">
          Login
        </ion-item>
        <ion-item menu-close href="#/app/search">
          Search
        </ion-item>
        <ion-item menu-close href="#/app/browse">
          Browse
        </ion-item>
        <ion-item menu-close href="#/app/playlists">
          Playlists
        </ion-item>
        <!-- :NEW: Added New Home menu item -->
        <ion-item menu-close href="#/app/home">
          New Home
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>
&#13;
&#13;
&#13;

当我运行此应用程序时,打开菜单,然后选择home.html页面未正确显示的新主菜单选项,它是空白的。我相信我必须在这里做些蠢事。

1 个答案:

答案 0 :(得分:0)

我发现了我的愚蠢!

我从codepen示例中复制了一行不需要的行并破坏了我的代码。从home.html中删除以下代码可以解决问题。

<script id="templates/home.html" type="text/ng-template">