使用ionic中的侧边栏以及angularjs中广播的使用
2024-09-18 23:10:33
接着之前的ionic的例子 查看例子:我的第一段ionic代码
demo3.html(黄底内容为增加或修改的内容)
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<title>ionic-demo3</title>
<link href="../lib/ionic/css/ionic.css" rel="stylesheet">
<script type="text/javascript" src="../lib/ionic/js/ionic.bundle.js" charset="utf-8"></script>
</head>
<body>
<ion-nav-bar class="bar-stable"></ion-nav-bar>
<ion-nav-view></ion-nav-view>
<script type="text/javascript">
var app = angular.module('app',['ionic']); app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('menu', {
url: '/menu',
templateUrl: 'menu.html',
abstract: true,
controller: 'MenuCtrl'
})
.state('menu.dash', {
url: '/dash',
views:{
'menuContent':{
templateUrl: 'dash.html',
controller: 'DashCtrl'
}
}
}); $urlRouterProvider.otherwise('/menu/dash'); }); app.controller('MenuCtrl', function($scope) {});
app.controller('DashCtrl', function($scope) {});
</script>
</body>
</html>
menu.html(该页面为新增页面)
<ion-side-menus> <ion-pane ion-side-menu-content>
<ion-nav-bar class="bar-stable nav-title-slide-ios7">
<ion-nav-back-button class="button-clear"><i class="icon ion-chevron-left"></i> Back</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
</ion-pane> <ion-side-menu side="left">
<header class="bar bar-header bar-stable">
<h1 class="title">Left</h1>
</header>
<ion-content class="has-header">
<ion-list>
<ion-item nav-clear menu-close href="#/app/search">
Search
</ion-item>
<ion-item nav-clear menu-close href="#/app/browse">
Browse
</ion-item>
<ion-item nav-clear menu-close href="#/app/playlists">
Playlists
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
dash.html(黄底内容为增加或修改的内容)
<ion-view view-title="Dashboard"> <ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons> <ion-content class="padding">
<div class="list card">
<div class="item item-divider">Recent Updates</div>
<div class="item item-body">
<div>
There is a fire in <b>sector 3</b>
</div>
</div>
</div>
<div class="list card">
<div class="item item-divider">Health</div>
<div class="item item-body">
<div>
You ate an apple today!
</div>
</div>
</div>
<div class="list card">
<div class="item item-divider">Upcoming</div>
<div class="item item-body">
<div>
You have <b>29</b> meetings on your calendar tomorrow.
</div>
</div>
</div>
</ion-content>
</ion-view>
写到这里,出现一个问题,就是菜单和内容是两个页面,如果在菜单页中需要执行内容页的内容的话,要怎么执行呢?
我这里使用了广播的方法,把上面的代码继续改造:
demo3.html(黄底内容为增加或修改的内容)
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<title>ionic-demo3</title>
<link href="../lib/ionic/css/ionic.css" rel="stylesheet">
<script type="text/javascript" src="../lib/ionic/js/ionic.bundle.js" charset="utf-8"></script>
</head>
<body>
<ion-nav-bar class="bar-stable"></ion-nav-bar>
<ion-nav-view></ion-nav-view>
<script type="text/javascript">
var app = angular.module('app',['ionic']); app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('menu', {
url: '/menu',
templateUrl: 'menu.html',
abstract: true,
controller: 'menuCtrl'
})
.state('menu.dash', {
url: '/dash',
views:{
'menuContent':{
templateUrl: 'dash.html',
controller: 'DashCtrl'
}
}
}); $urlRouterProvider.otherwise('/menu/dash'); }); app.controller('menuCtrl', function($scope) {
$scope.func = function(text) {
$scope.$broadcast("func", text);
}
});
app.controller('DashCtrl', function($scope) {
$scope.msg = "测试内容"; $scope.$on("func",function (event, text) {
alert("本页内容:" + $scope.msg + "\n传过来内容:" + text);
});
});
</script>
</body>
</html>
menu.html和dash.html页面不变
发送广播,使用$scope.$broadcast
接收广播,使用$scope.$on
最新文章
- MyBatis源码分析-MyBatis初始化流程
- lamp搭建,thinkphp安装
- Debian 7(Linux) 安装SSH使用SecureCRT连接配置
- 双十一来了,别让你的mongodb宕机了
- MarkdownPad Win10 无法预览
- git冲突解决办法
- HDU 2577 How to Type (DP,经典)
- jqeuery $.ajax 与后台jsone交互
- Android(java)学习笔记147:textView 添加超链接(两种实现方式,,区别于WebView)
- Js判断密码强度并显示提示信息
- USACO 4.2 The Perfect Stall(二分图匹配匈牙利算法)
- git学习(持续踩坑中&#129315;)
- MIUI目前为止最简单安装谷歌服务框架教程
- redis cli命令
- Win7 VS2017 Boost Python入门
- .NET Core 2.1 IIS 部署 出现500.19 错误
- BZOJ1588 [HNOI2002]营业额统计 set
- 雷林鹏分享:C# 匿名方法
- 关于JBoss日志中的报错Exception in thread ";AWT-EventQueue-0";的解决记录
- [3G/4G]3G/4G模块开发