我有index.html的以下代码
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/angular-translate/angular-translate.min.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/main.js"></script>
</head>
<body ng-app="starter" ng-controller="TranslateController" ng-init="checkLanIt()">
<ion-header-bar class="bar-calm">
<h1 class="title">List</h1>
</ion-header-bar>
<ion-tabs class="tabs-icon-top">
<ion-tab title="Home" icon="ion-home" ui-sref="home">
<ion-nav-view name="home"></ion-nav-view>
</ion-tab>
<ion-tab title="Play" icon="ion-android-volume-up" ui-sref="play">
<ion-nav-view name="play"></ion-nav-view>
</ion-tab>
<ion-tab title="Map" icon="ion-map" ui-sref="map">
<ion-nav-view name="map"></ion-nav-view>
</ion-tab>
<ion-tab title="Info" icon="ion-information" ui-sref="info">
<ion-nav-view name="info"></ion-nav-view>
</ion-tab>
</ion-tabs>
</body>
</html>
我的App.js看起来像这样：
var app = angular.module('starter', ['ionic', 'pascalprecht.translate']);
app.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if (window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
});
});
app.config(['$translateProvider', function($translateProvider) {
$translateProvider.translations('en', {
'LOCATION1': 'At Home',
'LOCATION2': 'Atelier House',
'LOCATION3': 'Street'
});
$translateProvider.translations('it', {
'LOCATION1': 'A Casa',
'LOCATION2': 'Atelier Casa',
'LOCATION3': 'Strada'
});
$translateProvider.preferredLanguage('en');
}]);
app.controller('TranslateController', function($translate, $scope) {
$scope.checkLanIt = function() {
var language = window.navigator.userLanguage || window.navigator.language;
if(language == "it-it" || language == "it-IT" || language == "it-ch" || language == "it-CH") {
$translate.use("it");
}
else {
$translate.use("en");
}
}
});
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/')
$stateProvider.state('home', {
url: '/home',
views: {
home: {
templateUrl: '../templates/home.html'
}
}
})
$stateProvider.state('play', {
url: '/play',
views: {
play: {
templateUrl: '../templates/part-index.html'
}
}
})
$stateProvider.state('map', {
url: '/map',
views: {
map: {
templateUrl: '../templates/map.html',
}
}
})
$stateProvider.state('info', {
url: '/info',
views: {
info: {
templateUrl: '../templates/info.html'
}
}
})
});
一个模板（part-index.html）如下所示：
<ion-view title="Play">
<ion-content>
<div class="list card">
<a href="home.html" animation="slide-left-right" class="item item-icon-right">
<i class="icon ion-navigate lock-start" id="s-home-h"></i>
<i class="icon ion-chevron-right"></i>{{ 'LOCATION1' | translate }}</a>
<a href="atelier.html" animation="slide-left-right" class="item item-icon-right">
<i class="icon ion-navigate lock-start" id="s-atelier-h"></i>
<i class="icon ion-chevron-right"></i>
{{ 'LOCATION2' | translate }}
</a>
<a href="strasse.html" class="item item-icon-right">
<i class="icon ion-navigate lock-start" id="s-street-h"></i>
<i class="icon ion-chevron-right"></i>
{{ 'LOCATION3' | translate }}
</a>
<a href="bern.html" class="item item-icon-right">
<i class="icon ion-navigate lock-start" id="s-bern-h"></i>
<i class="icon ion-chevron-right"></i>
Bern
</a>
<a href="bahnhof.html" class="item item-icon-right">
<i class="icon ion-navigate lock-start" id="s-bahnhof-h"></i>
<i class="icon ion-chevron-right"></i>
Bahnhof
</a>
<a href="messe.html" class="item item-icon-right">
<i class="icon ion-navigate lock-start" id="s-berlinmesse-h"></i>
<i class="icon ion-chevron-right"></i>
Berlin Messe
</a>
<a href="hotelberlin.html" class="item item-icon-right">
<i class="icon ion-navigate lock-start" id="s-hotelberlin-h"></i>
<i class="icon ion-chevron-right"></i>
Hotel Berlin
</a>
<a href="bahnhofber.html" class="item item-icon-right">
<i class="icon ion-navigate lock-start" id="s-bahnhofberlin-h"></i>
<i class="icon ion-chevron-right"></i>
Bahnhof Berlin
</a>
<a href="romburo.html" class="item item-icon-right">
<i class="icon ion-navigate lock-start" id="s-burorom-h"></i>
<i class="icon ion-chevron-right"></i>
Büro Rom
</a>
<a href="villa.html" class="item item-icon-right">
<i class="icon ion-navigate lock-start" id="s-villa-h"></i>
<i class="icon ion-chevron-right"></i>
Villa Sciarra
</a>
<a href="sol.html" class="item item-icon-right">
<i class="icon ion-navigate lock-start" id="s-solheure-h"></i>
<i class="icon ion-chevron-right"></i>
Solheure
</a>
<a onclick="play()" class="item item-icon-right">
<i class="icon ion-chevron-right"></i>
Nasoni
</a><br><br>
<audio id="mp3">
<source src="video/ping13.mp3" type="audio/mpeg">
</audio>
</div>
</ion-content>
</ion-view>
我的错误是什么？我认为我的路由正确，因为它在浏览器中工作。我的代码在移动设备上运行的问题是什么？我目前只在iOS上测试过它。
任何帮助非常感谢！
答案 0 :(得分：0)
您的模板文件夹是否在www上？
然后，您需要输入刚开始使用＆＃34; templates＆＃34;：
的网址 $stateProvider.state('home', {
url: '/home',
views: {
home: {
templateUrl: 'templates/home.html'
}
}
})
$stateProvider.state('play', {
url: '/play',
views: {
play: {
templateUrl: 'templates/part-index.html'
}
}
})
浏览器获取文件的位置，但iOS不知道。我有这个问题而且我疯了。希望这会有所帮助。