Ionic：路由在创建新视图时提供空白页面 [英] Ionic: routing gives a blank page while creating new view
本文介绍了Ionic：路由在创建新视图时提供空白页面的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我刚开始使用离子的新应用。我的其他观点运作良好，但在创建新视图后，我跳到路由我只看到一个空白页面，我不会弄错。
这是我的index.html
我的尝试：
I just started a new app with ionic. my other views are working well but after creating new views since i jump into routing i just see a blank page and i don't get my mistake.
this is my index.html
What I have tried:
<pre lang="HTML">
<!DOCTYPE html>
<html>
<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/font-awesome.css" rel="stylesheet">
<link href="css/vtabs.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script src="js/ng-map.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/0.10.0/lodash.min.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="lib/ngstorage/ngStorage.js"></script>
<script src="js/geocode.js"></script>
<script src="js/vtabs.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/directives.js"></script>
<script src="js/services.js"></script>
<script src="js/angular-local-storage.js"></script>
<script src="js/angular-local-storage.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-messages.min.js"></script>
<!-- <script type="text/javascript">
var pictureSource; // picture source
var destinationType; // sets the format of returned value
// Wait for device API libraries to load
//
document.addEventListener("deviceready",onDeviceReady,false);
// device APIs are available
//
function onDeviceReady() {
// alert("device");
pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;
}
// Called when a photo is successfully retrieved
//
function onPhotoDataSuccess(imageData) {
alert("image"+imageData);
// Uncomment to view the base64-encoded image data
// console.log(imageData);
alert("photoData");
// Get image handle
// //
var smallImage = document.getElementById('smallImage');
// Unhide image elements
//
smallImage.style.display = 'block';
// Show the captured photo
// The in-line CSS rules are used to resize the image
//
smallImage.src = "data:image/jpeg;base64," + imageData;
// alert(smallImage);
// alert(smallImage.src);
// return smallImage.src;
}
// Called when a photo is successfully retrieved
//
function onPhotoURISuccess(imageURI) {
alert("Photo uri");
// Uncomment to view the image file URI
// console.log(imageURI);
// Get image handle
// //
var largeImage = document.getElementById('largeImage');
// Unhide image elements
//
largeImage.style.display = 'block';
// Show the captured photo
// The in-line CSS rules are used to resize the image
//
largeImage.src = imageURI;
}
// A button will call this function
//
function capturePhoto() {
alert("Capture Photo");
// Take picture using device camera and retrieve image as base64-encoded string
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
destinationType: destinationType.DATA_URL });
}
// A button will call this function
//
function capturePhotoEdit() {
alert("Capture Edit");
// Take picture using device camera, allow edit, and retrieve image as base64-encoded string
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true,
destinationType: destinationType.DATA_URL });
}
// A button will call this function
//
function getPhoto(source) {
alert(source);
alert("get Phot");
// Retrieve image file location from specified source
navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
destinationType: destinationType.FILE_URI,
sourceType: source });
}
// Called if something bad happens.
//
function onFail(message) {
alert('Failed because: ' + message);
}
</script> -->
</head>
<body ng-app="ionicApp">
<!--
The nav bar that will be updated as we navigate between views.
-->
<!-- <ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar> -->
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-nav-view animation="slide-left-right"></ion-nav-view>
<!-- <ion-nav-view></ion-nav-view> -->
</body>
</html>
This is ma app.js file:
<pre lang="Javascript"> // Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('ionicApp', ['ionic', 'ionicApp.controllers','ionicApp.directives', 'ionicApp.services','LocalStorageModule','ngAnimate', 'vTabs','ngCordova','ngMap','geolocate','ngStorage'])
.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();
}
});
})
.config(function($stateProvider, $urlRouterProvider,localStorageServiceProvider) {
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'AppCtrl'
})
.state('registration', {
url: '/registration',
templateUrl: "templates/registration.html",
controller: 'RegisterCtrl'
})
.state('login', {
url: "/login",
templateUrl: "templates/login.html",
controller: 'LoginCtrl'
})
.state('setting', {
parent: 'app',
url: '^/setting',
views: {
'menuContent': {
templateUrl: "templates/setting.html",
controller: 'SettingCtrl'
}
}
})
.state('app.tasks', {
url: '/tasks',
views: {
'menuContent': {
templateUrl: 'templates/tasks.html',
controller: 'TasksCtrl'
}
}
})
.state('app.task', {
url: '/task/:id',
views: {
'menuContent': {
templateUrl: 'templates/task.html',
controller: 'TaskCtrl'
}
}
// views: {
// 'menuContent': {
// templateUrl: 'templates/task.html',
// controller: 'TaskCtrl'
// },
// 'detail': {
// templateUrl: 'report-table.html',
// controller: function($scope){ console.log("... controller stuff just for detail view ..."); }
// },
// 'note': {
// templateUrl: 'report-graph.html',
// controller: function($scope){ console.log("... controller stuff just for note view ..."); }
// }
// }
})
.state('app.newtask',{
url:'/newtask',
views: {
templateUrl: 'templates/newTask.html',
controller: 'newTaskCtrl'
}
})
.state('app.project', {
url: '/project',
views: {
'menuContent': {
templateUrl: 'templates/project.html',
controller: 'projectCtrl'
}
}
})
.state('app.saleOrder',{
url:'/saleOrder',
views:{
templateUrl:'templates/saleOrder.html',
controller:'saleOrderCtrl'
}
})
.state('app.maps', {
url: '/maps',
views: {
'menuContent': {
templateUrl: 'templates/maps.html',
controller: 'MapsCtrl'
}
}
})
.state('app.map', {
url: '/map/:id',
views: {
'menuContent': {
templateUrl: 'templates/maps.html',
controller: 'MapsCtrl'
}
}
})
.state('app.direction', {
url: '/direction/:id',
views: {
'menuContent': {
templateUrl: 'templates/directions.html',
controller: 'NavigationCtrl'
}
}
})
.state('app.customers', {
url: '/customers',
views: {
'menuContent': {
templateUrl: 'templates/customers.html',
controller: 'CustomersCtrl'
}
}
})
.state('app.customer', {
url: '/customer/:id',
views: {
'menuContent': {
templateUrl: 'templates/customer.html',
controller: 'CustomerCtrl'
}
}
})
.state('app.quotations', {
url: '/quotations',
views: {
'menuContent': {
templateUrl: 'templates/quotations.html',
controller: 'QuotationsCtrl'
}
}
})
.state('app.quotation', {
url: '/quotation/:id',
views: {
'menuContent': {
templateUrl: 'templates/quotation.html',
controller: 'QuotationCtrl'
}
}
})
.state('app.addquotation', {
url: '/addquotation',
views: {
'menuContent': {
templateUrl: 'templates/AddQuotation.html',
controller: 'AddQuotationCtrl'
}
}
})
.state('app.products', {
url: '/products',
views: {
'menuContent': {
templateUrl: 'templates/products.html',
controller: 'ProductsCtrl'
}
}
})
.state('app.product', {
url: '/product/:id',
views: {
'menuContent': {
templateUrl: 'templates/product.html',
controller: 'ProductCtrl'
}
}
})
.state('app.user', {
url: '/user/:id',
views: {
'menuContent': {
templateUrl: 'templates/user.html',
controller: 'UserCtrl'
}
}
})
.state('app.note', {
url: '/note/:id',
views: {
'menuContent': {
templateUrl: 'templates/note.html',
controller: 'AddNoteCtrl'
}
}
})
.state('app.material', {
url: '/material',
views: {
'menuContent': {
templateUrl: 'templates/AddMaterial.html',
controller: 'AddMaterialCtrl'
}
}
})
.state('app.login-into-menucontent', {
url: "/login-into-menucontent",
views: {
'menuContent' :{
templateUrl: "templates/login.html",
controller: 'LoginCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/login');
localStorageServiceProvider
.setPrefix('odoo')
.setStorageType('localStorage')
.setNotify(true, true)
});
这应该是我的模板（setting.html）
< ion-view view-title =Setting>
< ion-nav-bar class =bar-positive nav-title-slide-ios7>
< ion-nav-back-button class =button-clear> 返回
< ion-nav-buttons side =left>
< button class =button button-icon button-clear ion-naviconmenu-toggle =left>
< / button>
< ion-content>
< ion-list class =list>
< ion-item class =item item-icon-right href =＃/ app / project>
添加项目
< ion-item class =item item-icon-righthref =＃/ app / project>
删除项目
newTask.html
and this should be my template (setting.html)
<ion-view view-title="Setting">
<ion-nav-bar class="bar-positive nav-title-slide-ios7">
<ion-nav-back-button class="button-clear"> Back
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
<ion-content>
<ion-list class="list">
<ion-item class="item item-icon-right" href="#/app/project">
Add Project
<ion-item class="item item-icon-right" href="#/app/project">
Delete Project
newTask.html
<ion-view view-title="New task">
<ion-nav-bar class="bar-positive nav-title-slide-ios7">
<ion-nav-back-button class="button-clear">class="icon ion-chevron-left"> Back</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-buttons side="right" >
<button class="button button-icon fa fa-map-marker" ui-sref="app.maps">
</button>
</ion-nav-buttons> -->
</ion-nav-bar>
<ion-content >
<div ng-controller="newTaskCtrl">
<form name="newTaskForm" novalidate="true">
<label class="item item-input ">
<span class="input-label">Task Name</span>
</label>
<input type="text" name="tasknm" ng-model="user.tasknm"></input>
<!-- <h1>{{user.tasknm}}</h1> -->
<label class="item item-input item-select item-light">
<span class="input-label">Employee</span>
<select ng-model="user.selectedItem" ng-options="item.name for item in users">
<option value="">Add New Employee</option>
</select>
</label>
<input class="input-block-level ng-valid ng-dirty" ng-model="user.new_list_category" ng-show="!user.selectedItem" type="text" placeholder="new employee name">
<label class="item item-input item-select item-light">
<div class="input-label">Customer</div>
<select ng-model="user.id" ng-options="s as s.name for s in customer" ng-change="changeCust(customer.name)">
<option value="">Add New Company</option>
</select>
</label>
<input class="input-block-level ng-valid ng-dirty" ng-model="user.new_list_company" ng-show="!user.id" type="text" placeholder="new employee name">
<button class="button button-calm" ng-disabled="newTaskForm.$invalid" ng-click="save(newTaskForm.$valid)">Save</button>
<button class="button button-stable" ng-click="cancel()">Cancel
</button>
</form>
</div>
</ion-content>
</ion-view>
推荐答案
ionicPlatform）{
ionicPlatform) {
ionicPlatform.ready（function（）{
//默认隐藏附件栏（删除此项以显示键盘上方的附件栏
//表格输入）
if（window.cordova&& window.cordova.plugins.Keyboard）{
cordova.plugins.Keyboard.hideKeyboardAccessoryBar（true）;
}
if（window.StatusBar）{
StatusBar.styleDefault（）;
}
}）;
}）
.config（函数（
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(); } }); }) .config(function(
stateProvider，
stateProvider,
这篇关于Ionic：路由在创建新视图时提供空白页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
