离子模板内容未显示
Posted
技术标签:
【中文标题】离子模板内容未显示【英文标题】：Ionic template content not showing 【发布时间】：2014-06-08 03:43:10 【问题描述】：我已经使用 ion-side-menus 和 http://joelhooks.com/blog/2013/07/22/the-basics-of-using-ui-router-with-angularjs/ 中描述的 Angular 状态机制使用 Ionic 进行了基本菜单导航，但页面的中心部分没有显示任何内容当加载主页或单击任何菜单项时。这是简化的 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>
</head>
<body ng-app="testapp" ng-controller="MainCtrl">
<ion-side-menus>
<!-- Center content -->
<ion-side-menu-content>
<ion-header-bar class="bar-header">
<button class="button button-icon" ng-click="toggleSideMenu()">
<i class="icon ion-navicon"></i>
</button>
<h1 class="title">Home</h1>
<button class="button button-icon">
<i class="icon ion-star"></i>
</button>
</ion-header-bar>
</ion-side-menu-content>
<!-- Left menu -->
<ion-side-menu side="left">
<ion-list>
<ion-item class="item item-icon-left" ng-repeat="item in menuItems" item="item" ng-click="enterState(item.id)">
<i class="item.icon"></i> item.name
</ion-item>
</ion-list>
</ion-side-menu>
</ion-side-menus>
<script id="home.html" type="text/ng-template">
<ion-view title="Home">
<ion-content padding="true">
<p>HOME</p>
</ion-content>
</ion-view>
</script>
<script id="page2.html" type="text/ng-template">
<ion-view title="Page 2">
<ion-content padding="true">
<p>PAGE 2</p>
</ion-content>
</ion-view>
</script>
<script id="page3.html" type="text/ng-template">
<ion-view title="Page 3">
<ion-content padding="true">
<p>PAGE 3</p>
</ion-content>
</ion-view>
</script>
</body>
</html>
这里是控制器 JS ...
angular.module('testapp', ['ionic'])
.config(function($urlRouterProvider, $stateProvider)
"use strict";
/* Set up the states for the application's different sections. */
$stateProvider
.state('home', name: 'home', url: '/home', templateUrl: 'home.html', controller: 'MainCtrl')
.state('page2', name: 'page2', url: '/page2', templateUrl: 'page2.html', controller: 'MainCtrl')
.state('page3', name: 'page3', url: '/page3', templateUrl: 'page3.html', controller: 'MainCtrl')
;
)
.controller('MainCtrl', function($scope, $state, $ionicSideMenuDelegate)
"use strict";
/* Items for left side menu. */
$scope.menuItems = [
id: 'page2', name: 'Page 2', icon: 'icon ion-person-stalker',
id: 'page3', name: 'Page 3', icon: 'icon ion-person-stalker'
];
$scope.toggleSideMenu = function()
$ionicSideMenuDelegate.toggleLeft();
;
$scope.enterState = function(stateID)
$state.transitionTo(stateID);
;
$scope.enterState('home');
$scope.$state = $state;
)
正确的 URL 出现了，所以我认为状态机制工作正常，但 Angular 模板中的 Ionic 内容没有出现。任何对 Ionic 更有经验的人可以告诉我这里出了什么问题吗？
【问题讨论】：
【参考方案1】：简短回答
您至少有两个问题：
在控制器中调用$scope.enterState('home');。另一方面，每个状态都调用同一个控制器。因此，您进入相同的状态home。
删除此行并添加config：$urlRouterProvider.otherwise('/home');
在 HTML 中添加 <ion-nav-view class="slide-left-right"></ion-nav-view>
就是这样。
这里工作Demo
工作代码
HTML
<html ng-app="testapp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Login</title>
<link href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.min.js"></script>
</head>
<body ng-controller="MainCtrl">
<ion-side-menus>
<!-- Center content -->
<ion-side-menu-content>
<ion-header-bar class="bar-header">
<button class="button button-icon" ng-click="toggleSideMenu()">
<i class="icon ion-navicon"></i>
</button>
<h1 class="title">Home1</h1>
<button class="button button-icon">
<i class="icon ion-star"></i>
</button>
</ion-header-bar>
<ion-nav-view class="slide-left-right"></ion-nav-view>
</ion-side-menu-content>
<!-- Left menu -->
<ion-side-menu side="left">
<ion-list>
<ion-item class="item item-icon-left" ng-repeat="item in menuItems" item="item" ng-click="enterState(item.id)">
<i class="item.icon"></i> item.name
</ion-item>
</ion-list>
</ion-side-menu>
</ion-side-menus>
<script id="home.html" type="text/ng-template">
<ion-view title="Home">
<ion-content padding="true">
<p>HOME</p>
</ion-content>
</ion-view>
</script>
<script id="page2.html" type="text/ng-template">
<ion-view title="Page 2">
<ion-content padding="true">
<p>PAGE 2</p>
</ion-content>
</ion-view>
</script>
<script id="page3.html" type="text/ng-template">
<ion-view title="Page 3">
<ion-content padding="true">
<p>PAGE 3</p>
</ion-content>
</ion-view>
</script>
</body>
</html>
JS
angular.module('testapp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider)
"use strict";
/* Set up the states for the application's different sections. */
$stateProvider
.state('home', name: 'home', url: '/home', templateUrl: 'home.html', controller: 'MainCtrl')
.state('page2', name: 'page2', url: '/page2', templateUrl: 'page2.html', controller: 'MainCtrl')
.state('page3', name: 'page3', url: '/page3', templateUrl: 'page3.html', controller: 'MainCtrl')
;
$urlRouterProvider.otherwise('/home');
)
.controller('MainCtrl', function($scope, $state, $ionicSideMenuDelegate)
"use strict";
/* Items for left side menu. */
$scope.menuItems = [
id: 'page2', name: 'Page 2', icon: 'icon ion-person-stalker',
id: 'page3', name: 'Page 3', icon: 'icon ion-person-stalker'
];
$scope.toggleSideMenu = function()
$ionicSideMenuDelegate.toggleLeft();
;
$scope.enterState = function(stateID)
console.log(stateID);
$state.transitionTo(stateID);
;
//$scope.enterState('home');
$scope.$state = $state;
)
【讨论】：
太棒了！感谢您的快速帮助！ 由于某种原因，当我使用以上是关于离子模板内容未显示的主要内容，如果未能解决你的问题，请参考以下文章