Question

我正在用离子框架创建一个cordova应用程序，我使用CLI创建了一个空白应用程序，在我的index.html中我有一个幻灯片框，我在最后一张幻灯片中有一个按钮。我在该按钮中注册了一个点击事件，点击按钮我想导航到templates / projects.html。我希望我的问题很清楚。感谢

index.html 文件

  <body ng-app="starter" class="platform-android platform-cordova platform-webview">

<ion-pane>
  <ion-header-bar class="bar-stable">
    <h1 class="title">BabyLapse</h1>
  </ion-header-bar>
  <ion-content>
      <ion-slide-box style="height:100%" on-slide-changed="slideHasChanged($index)">
          <ion-slide >
              <div style="height:100%" class="box blue"><h1>BLUE</h1>
                  <img src="img/tutorial_img1.jpg">
              </div>
          </ion-slide>
          <ion-slide>
              <div class="box yellow"><h1>YELLOW</h1>
              <img src="img/tutorial_img2.jpg">
              </div>
          </ion-slide>
          <ion-slide>
              <div class="box pink"><h1>PINK</h1>
                  <img src="img/tutorial_img3.jpg" class="image">
              </div>
          </ion-slide>
          <ion-slide>
              <div class="box blue"><h1>BLUE</h1>
                  <img src="img/tutorial_img4.jpg">
              </div>
          </ion-slide>
          <ion-slide ng-controller="FirstSlideCtrl">
              <div class="box yellow"><h1>YELLOW</h1>
                 <!-- <img src="img/tutorial_img5.jpg" >-->
                  <button style="z-index:1000;height:100px;width:100px" ng-click="go('app.projects');">Créer Projet</button>
              </div>
          </ion-slide>
      </ion-slide-box>
  </ion-content>
</ion-pane>

app.js 文件

angular.module('starter', ['ionic', 'starter.controllers', 'ngCordova'])
      .config(function($stateProvider, $urlRouterProvider) {
          $stateProvider

              .state('app', {
              url: "/app",
              abstract: true,
              templateUrl: "index.html",
              controller: 'StarterCtrl'

          })

          .state('app.projects', {
              url: "/projects",
              views: {
                  'projects': {
                      templateUrl: "templates/projects.html",
                      controller: 'ProjectsCtrl'
                  }
              }
          });
          //$urlRouterProvider.otherwise('/projects');
      })

  .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);
          }
          if (window.StatusBar) {
              StatusBar.styleDefault();
          }

      })
  });

controllers.js

 angular.module('starter.controllers', ['ui.router'])

   .controller("StarterCtrl", function($scope) {
           $scope.data = {
               numViewableSlides: 0,
               slideIndex: 0,
               initialInstruction: true,
               secondInstruction: false

           };
           $scope.slideHasChanged = function(index) {
               $scope.data.slideIndex = index;
           };
           $scope.go = function(route) {
               alert('1');
               $state.go(route);

           };

       })
       .controller("ProjectsCtrl", 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("FirstSlideCtrl", function($scope, $state) {

           $scope.go = function(route) {
               alert(route);
               $state.go('app.projects');

           };

       });

Answer 1

我无法关注您的代码，因此我会尝试重新创建。在Ionic / Cordova中，您应该有一个 index.html ，这将是您申请的条目。

这是您将HTML与角度应用程序绑定的位置以及引用脚本的位置。

它的主体应该包含主导航视图<ion-nav-view>：

<ion-nav-bar class="bar-positive">
  <ion-nav-back-button>
  </ion-nav-back-button>
</ion-nav-bar>  

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

我的ng-app被称为应用，但您可以轻松地将其替换为启动器。

然后你会有单独的＆＃34;页面＆＃34;对于不同的观点。我可以想象在你的情况下你会有一个滑块视图和第二个用于项目创建的视图。

必须在<ion-view>中定义每个视图，以便您拥有内容<ion-content>。

我想你会需要陈述：

.state('main', {
    url: '/main',
    templateUrl: 'main.html',
    controller: 'mainController',
})

.state('projects', {
    url: '/projects',
    templateUrl: 'projects.html',
    controller: 'projectsController',
});

如果你想从滑块页面转到项目，你只需要：

$state.go('projects')

这是一个plunker中的结束result。

正如你所看到的，我读到了抽象视图，因为在我看来，你并不真正需要它，因为你没有使用任何基本模板：side-menu或tabs。

您可以随时添加它，但您的摘要不应该引用index.html文件。

$ state.go不参与离子框架

1 个答案: