使用ionic中的侧边栏以及angularjs中广播的使用
接着之前的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
使用ionic中的侧边栏以及angularjs中广播的使用的更多相关文章
- 两强相争，鹿死谁手 — JQuery中的Ajax与AngularJS中的$http
一.JQuery与AngularJS 首先,先简单的了解一下JQuery与AngularJS.从源头上来说,两者都属于原生JS所封装成的库,两种为平行关系. 二.Ajax请求与数据遍历打印 这里是Aj ...
- AngularJS学习--- AngularJS中XHR(AJAX)和依赖注入(DI) step5
前言:本文接前一篇文章,主要介绍什么是XHR,AJAX,DI,angularjs中如何使用XHR和DI. 1.切换工具目录 git checkout -f step- #切换分支 npm start ...
- 转: 理解AngularJS中的依赖注入
理解AngularJS中的依赖注入 AngularJS中的依赖注入非常的有用,它同时也是我们能够轻松对组件进行测试的关键所在.在本文中我们将会解释AngularJS依赖注入系统是如何运行的. Prov ...
- 理解AngularJS中的依赖注入
点击查看AngularJS系列目录 理解AngularJS中的依赖注入 AngularJS中的依赖注入非常的有用,它同时也是我们能够轻松对组件进行测试的关键所在.在本文中我们将会解释AngularJS ...
- AngularJS 中 Provider 的用法及区别
在一个分层良好的 Angular 应用中,Controller 这一层应该很薄.也就是说,应用里大部分的业务逻辑和持久化数据都应该放在 Service 里. 为此,理解 AngularJS 中的几个 ...
- [转]ionic或者angularjs中图片显示压缩问题解决 or 显示较大图片的某一块区域、裁剪显示
我们知道在html中显示图片一般都是用img控件标签,当然调整大小的也很容易. 但是会出现,特定的img大小,显示一张比较大尺寸的且长宽比例与特定img大小不相符的图片.而导致压缩问题,图片挤压的很严 ...
- AngularJS中get请求URL出现跨域问题
今天早上帮助同学看了一个AngularJS的问题,主要是请求中出现了跨域访问,请求被阻止. 下面是她给我的代码: <html lang="en" ng-app="m ...
- AngularJS 中的Promise --- $q服务详解
先说说什么是Promise,什么是$q吧.Promise是一种异步处理模式,有很多的实现方式,比如著名的Kris Kwal's Q还有JQuery的Deffered. 什么是Promise 以前了解过 ...
- AngularJS中的表单验证
AngularJS中的表单验证 AngularJS自带了很多验证,什么必填,最大长度,最小长度...,这里记录几个有用的正则式验证 1.使用angularjs的表单验证 正则式验证 只需要配置一个正则 ...
随机推荐
- java基础小测试
1.JDK,JRE,JVM三者的区别 jdk:java 开发工具包 jre:运行环境 jvm:虚拟机 2.javac的作用 ,反编译工具的作用 javac:将java文件编译成class文件 反编译: ...
- 【SQL】175. Combine Two Tables
Table: Person +-------------+---------+ | Column Name | Type | +-------------+---------+ | PersonId ...
- [NOI2009]诗人小G --- DP + 决策单调性
[NOI2009]诗人小G 题目描述: 小G是一个出色的诗人,经常作诗自娱自乐. 但是,他一直被一件事情所困扰,那就是诗的排版问题. 一首诗包含了若干个句子,对于一些连续的短句,可以将它们用空格隔开并 ...
- bzoj 1143: [CTSC2008]祭祀river / 2718: [Violet 4]毕业旅行 -- 二分图匹配
1143: [CTSC2008]祭祀river Time Limit: 10 Sec Memory Limit: 162 MB Description 在遥远的东方,有一个神秘的民族,自称Y族.他们 ...
- python开发_shelve_完整版_博主推荐
''' python中的shelve模块,可以提供一些简单的数据操作 他和python中的dbm很相似. 区别如下: 都是以键值对的形式保存数据,不过在shelve模块中, key必须为字符串,而值可 ...
- Codeforces Round #303 (Div. 2) B. Equidistant String 水题
B. Equidistant String Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/54 ...
- linux命令： Netstat
在Internet RFC标准中,Netstat的定义是: Netstat是在内核中访问网络及相关信息的程序,它能提供TCP连接,TCP和UDP监听,进程内存管理的相关报告. Netstat是控 ...
- Android中的数据存储（一）：SharedPreferences 2017-05-24 10:35 64人阅读 评论(1) 收藏
SharedPreferences 这是本人(菜鸟)学习android数据存储时接触的有关SharedPreferences的知识以及本人自己写的一个简单地demo,为初学者学习和使用SharedPr ...
- BOOST Converter Analog/Digital Adjusted Output Voltage TPS61045 MAX1932
DIGITALLY ADJUSTABLE BOOST CONVERTER The TPS61045 is a high frequency boost converter with digitally ...
- sql 内连接、外连接、自然连接等各种连接
1.内联接(典型的联接运算,使用像 = 或 <> 之类的比较运算符).包括相等联接和自然联接. 内联接使用比较运算符根据每个表共有的列的值匹配两个表中的行.例如,检索 students和c ...