离子路由适用于浏览器但不适用于设备答案

【问题标题】：Ionic Routing works in browser but not device离子路由适用于浏览器但不适用于设备
【发布时间】：2016-02-19 06:44:32
【问题描述】：

我有以下 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 上测试过。

非常感谢任何帮助！

【问题讨论】：

标签： javascript angularjs ionic-framework

【解决方案1】：

您的模板文件夹在 www 上吗？

然后你需要输入以“模板”开头的url：

  $stateProvider.state('home', {
  url: '/home',
  views: {
    home: {
      templateUrl: 'templates/home.html'
    }
  }
})
$stateProvider.state('play', {
  url: '/play',
  views: {
    play: {
      templateUrl: 'templates/part-index.html'
    }
  }
})

浏览器获取文件的位置，但 iOS 不知道。我遇到了这个问题，我快疯了。希望这会有所帮助。

【讨论】：