我刚开始使用离子的新应用。我的其他观点运作良好但是在创建新视图后我跳到路由我只看到一个空白页面，我不会弄错。
这是我的index.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>
这是ma app.js文件：
// 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"><i class="icon ion-chevron-left"></i> 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-bar>
<ion-content>
<ion-list class="list">
<ion-item class="item item-icon-right" href="#/app/project">
<i class="icon ion-edit"></i>
Add Project
</ion-item>
<ion-item class="item item-icon-right" href="#/app/project">
<i class="icon-remove-sign"></i>
Delete Project
</ion-item>
</ion-list>
</ion-content>
</ion-view>
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"><i class="icon ion-chevron-left"></i> 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>
答案 0 :(得分：0)
你的州应该是你主要的嵌套状态＆＃34; abstract＆＃34;状态。
.state('app.registration', {
url: '/registration',
templateUrl: "templates/registration.html",
controller: 'RegisterCtrl'
})