【发布时间】：2017-01-23 12:21:03
【问题描述】：
我是 ionic 和 Angular JS 的新手。我正在尝试离子框架中的简单应用程序。我正在尝试借助 ngRoute 概念在 ion-view 标签中注入 html 模板。但是我的代码没有在 ion-view 中注入 html 模板。同样基于注入的页面，标题栏标题也会自动更改。我也想在标题栏中显示带有菜单项的弹出图标。我怎样才能做到这一点。找到以下 index.html、home.html 和 app.js 文件。提前致谢。
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">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
</head>
<body ng-app="starter" ng-controller="AppCtrl">
<ion-nav-bar title="{{message}}" class="bar-positive">
<button class="button button-icon ion-more" ng-click="popover.show($event)">
</button>
</ion-nav-bar>
<ion-nav-view>
</ion-nav-view>
<script id="mypopover.html" type="text/ng-template">
<ion-popover-view >
<ion-content class="my-popover">
<div class="list">
<a class="item" nav-transition="android" href="#aboutus">
About Us
</a>
<a nav-transition="none" class="item" href="http://ionicframework.com/docs/" target="_blank">
Documentation
</a>
<a class="item" href="http://showcase.ionicframework.com/" target="_blank">
Showcase
</a>
<a class="item" href="http://ionicframework.com/submit-issue/" target="_blank">
Submit an Issue
</a>
<a class="item" href="https://github.com/driftyco/ionic" target="_blank">
Github Repo
</a>
</div>
</ion-content>
</ion-popover-view>
</script>
</body>
</html>
模板/home.html
<script type="text/ng-template" id="home.html">
<ion-view title="Movie Review">
<ion-content>
<div class="fixed-header my-video">
<ion-slide-box show-pager="false" auto-play="false" does-continue="true">
<ion-slide>
<img style="max-width:100%" src="img/irumuganmovie.png"/>
</ion-slide>
<ion-slide>
<img style="max-width:100%" src="img/irumuganmovie.png"/>
</ion-slide>
<ion-slide>
<img style="max-width:100%" src="img/irumuganmovie.png"/>
</ion-slide>
<ion-slide>
<img style="max-width:100%" src="img/irumuganmovie.png"/>
</ion-slide>
<ion-slide>
<img style="max-width:100%" src="img/irumuganmovie.png"/>
</ion-slide>
</ion-slide-box>
</div>
<div class="ion-content-below-my-video">
<div class="row center grid-row-height">
<div class="col width-50 grid-col-size">
<ion-card>
<img src="img/irumuganmovie.png"/>
<ion-card-content>
<ion-card-title>
Nine Inch Nails Live
</ion-card-title>
</ion-card-content>
</ion-card>
</div>
<div class="col width-50 grid-col-size">
<ion-card>
<img src="img/irumuganmovie.png"/>
<ion-card-content>
<ion-card-title>
Nine Inch Nails Live
</ion-card-title>
</ion-card-content>
</ion-card>
</div>
</div>
<div class="row center grid-row-height">
<div class="col width-50 grid-col-size">
<ion-card>
<img src="img/irumuganmovie.png"/>
<ion-card-content>
<ion-card-title>
Nine Inch Nails Live
</ion-card-title>
</ion-card-content>
</ion-card>
</div>
<div class="col width-50 grid-col-size">
<ion-card>
<img src="img/irumuganmovie.png"/>
<ion-card-content>
<ion-card-title>
Nine Inch Nails Live
</ion-card-title>
</ion-card-content>
</ion-card>
</div>
</div>
</div>
</ion-content>
</ion-view>
</script>
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'
var app=angular.module('starter', ['ionic','ngRoute']);
app.controller('AppCtrl',function($scope,$ionicPopover)
{
$ionicPopover.fromTemplateUrl('mypopover.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(popover) {
$scope.popover = popover;
});
$scope.openPopover = function($event) {
alert("opened");
$scope.popover.show($event);
};
$scope.closePopover = function() {
$scope.popover.hide();
};
// Perform Action on destroy
$scope.$on('$destroy', function() {
$scope.popover.remove();
});
// Perform action on hide popover
$scope.$on('popover.hidden', function() {
// Perform action
});
// Perform action on remove popover
$scope.$on('popover.removed', function() {
// Perform action
});
});
app.config(function($routeProvider){
$routeProvider
.when('/',{
url: '/home',
templateUrl : "templates/home.html",
controller : "homeCtrl"
});
});
app.controller('homeCtrl',function($scope) {
// body...
$scope.message="home controller";
});
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();
}
});
})
【问题讨论】：
标签： html angularjs ionic-framework