本文介绍了离子路由问题，显示的链接空白页的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我开始建设离子应用程序，但我有一个严重的问题，路由！我添加了一个按钮，但它链接到一个空白页，并没有显示该页面的内容！
我有3个文件：
app.js
//离子入门应用// angular.module是一个用于创建，注册和检索角模块全球排名
//'启动'是这个角模块实例的名称（A＆LT还设置;机身＆gt;在index.html的属性）
//第二个参数是数组'需要'
//'starter.services在services.js被发现
//'starter.controllers在controllers.js被发现
angular.module（'启动'，['离子'，'starter.controllers'，'starter.services']）.RUN（函数（$ ionicPlatform）{
$ ionicPlatform.ready（函数（）{
//默认隐藏附件栏（删除此显示键盘上方的附件栏
//表单输入）
如果（window.cordova＆安培;＆安培; window.cordova.plugins和放大器;＆安培; window.cordova.plugins.Keyboard）{
cordova.plugins.Keyboard.hideKeyboardAccessoryBar（真）;
}
如果（window.StatusBar）{
// org.apache.cordova.statusbar要求
StatusBar.styleLightContent（）;
}
}）;
}）的.config（函数（$ stateProvider，$ urlRouterProvider）{ //离子采用AngularUI路由器，它使用状态的概念
//这里了解更多：https://github.com/angular-ui/ui-router
//设置该应用程序可以在各种状态。
//每个州的控制器可以controllers.js找到
$ stateProvider //设置为标签指令的抽象状态
.STATE（'标签'，{
网址：/标签
摘要：真实，
templateUrl：模板/ tabs.html
}） //每个标签都有自己的导航历史堆栈： .STATE（'tab.dash'，{
网址：'/横线'，
观点：{
制表破折号'：{
templateUrl：'模板/制表dash.html'，
控制器：'DashCtrl
}
}
}） .STATE（'tab.chats'，{
网址：'/聊天，
观点：{
制表聊天：{
templateUrl：'模板/制表chats.html'，
控制器：'ChatsCtrl
}
}
}）
.STATE（'tab.chat细节'，{
网址：'/聊天/：chatId'，
观点：{
制表聊天：{
templateUrl：'模板/聊天detail.html'，
控制器：'ChatDetailCtrl
}
}
}） $ stateProvider.state（页面'，{
网址：'/模板/页，
观点：{
家庭：{
templateUrl：'模板/ page.html即可'，
控制器：'PageCtrl
}
}
}） .STATE（'tab.account'，{
网址：'/帐户，
观点：{
制表帐户：{
templateUrl：'模板/制表account.html'，
控制器：'AccountCtrl
}
}
}）; //如果没有上述状态相匹配，以此作为后备
$ urlRouterProvider.otherwise（'/标签/破折号'）;}）;
controllers.js
angular.module（'starter.controllers'，[]）.controller（'DashCtrl'，函数（$范围内）{}）.controller（'ChatsCtrl'，函数（$范围，聊天）{
//随着离子新视图缓存，控制器只叫
//当他们重建或应用程序的开始，而不是每一个页面的变化。
//要监听时当前页是活动的（例如，刷新数据），
//监听$ ionicView.enter事件：
//
//$scope.$on('$ionicView.enter'功能（E）{
//}）; $ scope.chats = Chats.all（）;
$ scope.remove =功能（聊天）{
Chats.remove（聊天）;
}
}）.controller（'ChatDetailCtrl'，函数（$范围，$ stateParams，聊天）{
$ scope.chat = Chats.get（$ stateParams.chatId）;
}）.controller（'AccountCtrl'，函数（$范围）{
$ scope.settings = {
enableFriends：真
};
}）;
和制表chats.html
＆LT;离子查看查看标题=聊天＆GT;
＆LT;离子含量＆GT;
＆LT;离子列表＆gt;
＆LT;离子项目类=项目 - 删除 - 动画项目 - 化身项目图标右NG重复=在聊天室聊天TYPE =项目文本换行的href =＃/标签/聊天/ { {chat.id}}＆GT;
＆LT; IMG NG-SRC ={{chat.face}}＆GT;
＆LT; H2＆GT; {{chat.name}}＆LT; / H＆GT;
＆所述p为H.; {{chat.lastText}}＆下; / P＆GT;
＆LT; I类=图标离子字形右边的图标，附件＆GT;＆LT; / I＆GT; ＆LT;离子选项按钮类=按钮主见NG点击=删除（聊天）＆GT;
删除
＆LT; /离子选项按钮＆GT;
＆LT; /离子项目＆GT;
＆LT; /离子列表＆gt;
＆LT;一类=按钮图标图标向右离子字形权的href =＃/模板/页＆GT;科学事实与LT; / A＆GT;
＆LT; /离子含量＆GT;
＆LT; /离子视图＆gt;
解决方案
由于我假设你没有＆LT;离子导航视图名称=家＆GT; ＆LT; /离子导航视图方式＆gt; 在code随时随地定义
.STATE（页面'，{
网址：'/模板/页，
templateUrl：'模板/ page.html即可'，
控制器：'PageCtrl
}
}
如果您已经定义了。那么它应该是
.STATE（页面'，{
网址：'/模板/页，
观点：{
家：{//应该加引号。
templateUrl：'模板/ page.html即可'，
控制器：'PageCtrl
}
}
我知道你是新的，一切，但请先通过DOCS。你需要完全理解路由到你想要做什么。
I started building ionic app but i have a serious problem with routing! I have added a button but it links to a blank page and not showing the content of that page!
I have 3 files:
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
};
});
and 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>
解决方案
Since I assume you don't have a <ion-nav-view name="home"> </ion-nav-view> defined anywhere in code.
.state('page', {
url: '/templates/page',
templateUrl: 'templates/page.html',
controller: 'PageCtrl'
}
}
if you have defined it. then it should be
.state('page', {
url: '/templates/page',
views: {
'home': { // it should be in quotes.
templateUrl: 'templates/page.html',
controller: 'PageCtrl'
}
}
I know you are new and all, but please first go through the DOCS. You need to understand routing completely to do what you want.
这篇关于离子路由问题，显示的链接空白页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！