Question

对于我的生活，我无法弄清楚我在这里做错了什么。我已经完全按照这些例子进行操作，我不能将其显示为空白页面之外的其他内容......

我有一个BARE离子应用程序，我刚开始。它与它开始的默认模板一起工作得很好，但是当我更改最小的代码以根据我的需要对其进行个性化设置（设置一个新的主页并删除其他选项卡）时，我现在得到的只是一个空白页... < / p>

JS / app.coffee

angular.module 'myApp', ['ionic']
.run ($ionicPlatform) ->
  $ionicPlatform.ready ->
    if window.cordova && window.cordova.plugins.Keyboard
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

    if window.StatusBar
      StatusBar.styleDefault();

.config ($stateProvider, $urlRouterProvider) ->
  $stateProvider
  .state 'tab', {
    url: "/tab",
    abstract: true,
    templateUrl: "templates/tabs.html"
  }
  .state 'tabs.home', {
    url: '/',
    views: {
      'home': {
        templateUrl: 'templates/home.html',
        controller: 'HomeController'
    }
  }
}

$urlRouterProvider.otherwise('/');

的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/style.css" rel="stylesheet">
  <script src="lib/ionic/js/ionic.bundle.js"></script>
  <script src="cordova.js"></script>
  <script src="js/app.js"></script>
  <script src="js/controllers.js"></script>
</head>
<body ng-app="myApp" animation="slide-left-right-ios7">
  <ion-nav-bar class="bar-stable nav-title-slide-ios7">
    <ion-nav-back-button class="button-icon icon  ion-ios7-arrow-back">
      Back
    </ion-nav-back-button>
  </ion-nav-bar>
  <ion-nav-view></ion-nav-view>
</body>
</html>

模板/ home.html做为

<ion-view title="home">
  <ion-content class="padding">
    Hello
  </ion-content>
</ion-view>

JS / controllers.coffee

angular.module 'myApp'
.controller 'HomeController', ($scope) ->

我得到的只是一个空白的黑页。我在SO上看过所有相同的问题，看不出我在做什么不同的事情。我也查看了谷歌和离子文档的例子。我看不到任何我没做错的事。控制台中否 404或JS错误。

我已经在这里待了大约2个小时但没有结果。

Answer 1

好的，我得到了它，但我改变了一些东西

首先，你的抽象状态是＆＃39; tab＆＃39;所以将tabs.home更改为tab.home并将名称添加到URL中：

.state 'tab.home', {
url: '/home',
views: {
  'home': {
    templateUrl: 'templates/home.html',
    controller: 'HomeController'
}

}

现在你的本来就是这样：

$urlRouterProvider.otherwise('/tab/home');

并确保在tabs.html

中更改ion-nav-view的名称

  <ion-tab title="Home title" icon="icon ion-home" href="#/tab/home">
    <ion-nav-view name="home"></ion-nav-view>

</ion-tabs>

它对我有用。

离子导航视图导致空白页

1 个答案: