$ state.go在离子框架中不起作用
[英]$state.go don't work in ionic framework
问题描述
I'm creating a cordova app with ionic framework, i created a blank app with CLI, in my index.html i have a slide box, in which i have a button in the last slide. 
我正在使用ionic框架创建cordova应用程序，并在CLI.index.html中创建了一个空白应用程序，我有一个幻灯片框，其中的上一张幻灯片中有一个按钮。 I have registered a click event in that button, in click in the button i would like to navigate to templates/projects.html. 我已经在该按钮中注册了一个单击事件，在该按钮中单击，我想导航至template / projects.html。 I hope my problem is clear. 我希望我的问题很清楚。 Thanks 谢谢
index.html file 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 file 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 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');
};
});
1 个解决方案
解决方案1
2 已采纳 2015-05-17 19:23:06
I cannot follow your code so I'll try to recreate. 我无法遵循您的代码，因此我将尝试重新创建。 In Ionic/Cordova you should have an index.html which would be your entry for the application. 在Ionic / Cordova中，您应该有一个index.html ，它将作为您的应用程序条目。
This is the place where you bind your HTML with the angular app and where your reference your scripts. 在这里，您可以将HTML与angular应用程序绑定在一起，并可以参考脚本。
It should have a body with the main nav-view <ion-nav-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>
My ng-app is called app but you can easily replace it with starter . 我的ng-app称为app，但是您可以轻松地将其替换为starter 。
Then you would have separate "pages" for different views. 然后，您将拥有用于不同视图的单独“页面”。 I can imagine in your situation you would have one view for the slider and the second one for the project's creation. 我可以想象在您的情况下，滑块将具有一个视图，项目创建时将具有第二个视图。
Each view must be defined in a <ion-view> where you're going to a have a content <ion-content> . 每个视图必须在<ion-view>中定义，您将在其中具有内容<ion-content> 。
I imagine you're going to need to states: 我想您将需要声明：
.state('main', {
url: '/main',
templateUrl: 'main.html',
controller: 'mainController',
})
.state('projects', {
url: '/projects',
templateUrl: 'projects.html',
controller: 'projectsController',
});
if you want to go to projects from the slider page you simply have to: 如果要从滑块页面转到项目，只需执行以下操作：
$state.go('projects')
This is the end result in a plunker. 这是最终结果 。
As you can see I got read of the abstract view cause it seems to me that you don't really need it as you're not using any base template: side-menu or tabs. 如您所见，我已经阅读了抽象视图，因为在我看来，您实际上并不需要它，因为您没有使用任何基本模板：侧面菜单或选项卡。
You can always add it but your abstract should never refer the index.html file. 您始终可以添加它，但是摘要绝对不要引用index.html文件。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.