Question

我开始构建离子应用程序，但我有一个严重的路由问题！我添加了一个按钮，但它链接到一个空白页面而不显示该页面的内容！

我有3个文件：

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'
// 'starter.services' is found in services.js
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])

.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 && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleLightContent();
    }
  });
})

.config(function($stateProvider, $urlRouterProvider) {

  // Ionic uses AngularUI Router which uses the concept of states
  // Learn more here: https://github.com/angular-ui/ui-router
  // Set up the various states which the app can be in.
  // Each state's controller can be found in controllers.js
  $stateProvider

  // setup an abstract state for the tabs directive
    .state('tab', {
    url: "/tab",
    abstract: true,
    templateUrl: "templates/tabs.html"
  })

  // Each tab has its own nav history stack:

  .state('tab.dash', {
    url: '/dash',
    views: {
      'tab-dash': {
        templateUrl: 'templates/tab-dash.html',
        controller: 'DashCtrl'
      }
    }
  })

  .state('tab.chats', {
      url: '/chats',
      views: {
        'tab-chats': {
          templateUrl: 'templates/tab-chats.html',
          controller: 'ChatsCtrl'
        }
      }
    })
    .state('tab.chat-detail', {
      url: '/chats/:chatId',
      views: {
        'tab-chats': {
          templateUrl: 'templates/chat-detail.html',
          controller: 'ChatDetailCtrl'
        }
      }
    })

    $stateProvider.state('page', {
  url: '/templates/page',
  views: {
    home: {
      templateUrl: 'templates/page.html',
       controller: 'PageCtrl'
    }
  }
})

  .state('tab.account', {
    url: '/account',
    views: {
      'tab-account': {
        templateUrl: 'templates/tab-account.html',
        controller: 'AccountCtrl'
      }
    }
  });

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/tab/dash');

});

controllers.js

angular.module('starter.controllers', [])

.controller('DashCtrl', function($scope) {})

.controller('ChatsCtrl', function($scope, Chats) {
  // With the new view caching in Ionic, Controllers are only called
  // when they are recreated or on app start, instead of every page change.
  // To listen for when this page is active (for example, to refresh data),
  // listen for the $ionicView.enter event:
  //
  //$scope.$on('$ionicView.enter', function(e) {
  //});

  $scope.chats = Chats.all();
  $scope.remove = function(chat) {
    Chats.remove(chat);
  }
})

.controller('ChatDetailCtrl', function($scope, $stateParams, Chats) {
  $scope.chat = Chats.get($stateParams.chatId);
})

.controller('AccountCtrl', function($scope) {
  $scope.settings = {
    enableFriends: true
  };
});

和tab-chats.html

<ion-view view-title="Chats">
  <ion-content>
    <ion-list>
      <ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="chat in chats" type="item-text-wrap" href="#/tab/chats/{{chat.id}}">
        <img ng-src="{{chat.face}}">
        <h2>{{chat.name}}</h2>
        <p>{{chat.lastText}}</p>
        <i class="icon ion-chevron-right icon-accessory"></i>

        <ion-option-button class="button-assertive" ng-click="remove(chat)">
          Delete
        </ion-option-button>
      </ion-item>
    </ion-list>
     <a class="button icon icon-right ion-chevron-right" href="#/templates/page">Scientific Facts</a>
  </ion-content>
</ion-view>

Answer 1

因为我假设您没有在代码中的任何位置定义<ion-nav-view name="home"> </ion-nav-view>。

 .state('page', {
    url: '/templates/page',
    templateUrl: 'templates/page.html',
    controller: 'PageCtrl'
   }
 }

如果你已定义它。那应该是

.state('page', {
  url: '/templates/page',
  views: {
    'home': {       // it should be in quotes.
      templateUrl: 'templates/page.html',
      controller: 'PageCtrl'
   }
}

我知道你是新人，但请先通过DOCS。您需要完全了解路由以执行您想要的操作。

Answer 2

我遇到过这个问题，很难找出白屏的问题。

但是按照这个检查清单，你可以解决它：

1）在index.html中，检查您是否包含任何不存在或错误的JS脚本。（脚本src标签）。

2）在您的index.html中加载JS文件时，请仔细检查它们的顺序。

3）在每个状态URL配置的末尾删除分号（;）。

4）确保在执行时使用单引号：

 $urlRouterProvider.otherwise('app/users');

5）不要犹豫，在控制器中评论与白屏网址相关的代码。

6）最后，尝试将您想要路由的URL替换为您在测试应用时可以看到的另一个URL。例如，如果在尝试路由到/ users时出现白屏，但可以看到/ home视图。用/ home替换$ urlRouterProvider.otherwise，看看在真实设备或模拟器上测试时是否显示。通过这样做，您已经可以知道它是白屏路由的视图或控制器，其中包含可能的错误。

Answer 3

此问题是由于语法错误或代码中的某个错误逻辑引起的。您需要调试JavaScript代码以找出它的位置。以下是如何做到这一点：

1）例如，当您路由到/用户URL时，请说出你的白屏死机。

2）注释与/ user视图相关的控制器的所有代码。你应该能够摆脱白屏。

3）取消注释代码并开始在控制器功能范围内的每个代码行之后添加几个alert（）对话框，并搜索它阻止到白屏的位置。

例如，我得到了白屏死机，因为在我看来我在一个数组上做了一个ng-repeat，它是由我的一个函数控制器动态创建的，并且在获取过程完成之前无法加载它。一旦我发现了这个问题，我就开始使用ng-init加载数组，然后用ng-repeat进行迭代。现在一切都已修好了！

正如我所说，你得到的白屏更多是关于代码中某处发生的逻辑错误。希望它有所帮助。

离线路由问题，在链接中显示空白页面

3 个答案: