我正在使用 ionic 框架创建一个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');
};
});
最佳答案
我无法遵循您的代码，因此我将尝试重新创建。 在 Ionic/Cordova 中，您应该有一个 index.html，它将作为您的应用程序条目。
这是您将 HTML 与 Angular 应用程序绑定(bind)以及引用脚本的地方。
它应该有一个带有主导航 View 的主体 <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称为app，但您可以轻松地将其替换为starter。
然后您将拥有针对不同 View 的单独“页面”。我可以想象在您的情况下，您将有一个用于 slider 的 View 和第二个用于项目创建的 View 。
每个 View 必须在 <ion-view> 中定义您将在哪里获得内容 <ion-content> .
我想你需要说明:
.state('main', {
url: '/main',
templateUrl: 'main.html',
controller: 'mainController',
})
.state('projects', {
url: '/projects',
templateUrl: 'projects.html',
controller: 'projectsController',
});
如果您想从 slider 页面转到项目，您只需:
$state.go('projects')
这就结束了result在一个笨蛋中。
正如您所看到的，我阅读了抽象 View ，因为在我看来，您实际上并不需要它，因为您没有使用任何基本模板:侧面菜单或选项卡。
您随时可以添加它，但您的摘要永远不应该引用index.html 文件。
关于javascript - $state.go 不适用于 ionic 框架，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30258941/