接着之前的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中广播的使用的更多相关文章

  1. 两强相争，鹿死谁手 — JQuery中的Ajax与AngularJS中的$http

    一.JQuery与AngularJS 首先,先简单的了解一下JQuery与AngularJS.从源头上来说,两者都属于原生JS所封装成的库,两种为平行关系. 二.Ajax请求与数据遍历打印 这里是Aj ...

  2. AngularJS学习--- AngularJS中XHR(AJAX)和依赖注入(DI) step5

    前言:本文接前一篇文章,主要介绍什么是XHR,AJAX,DI,angularjs中如何使用XHR和DI. 1.切换工具目录 git checkout -f step- #切换分支 npm start ...

  3. 转: 理解AngularJS中的依赖注入

    理解AngularJS中的依赖注入 AngularJS中的依赖注入非常的有用,它同时也是我们能够轻松对组件进行测试的关键所在.在本文中我们将会解释AngularJS依赖注入系统是如何运行的. Prov ...

  4. 理解AngularJS中的依赖注入

    点击查看AngularJS系列目录 理解AngularJS中的依赖注入 AngularJS中的依赖注入非常的有用,它同时也是我们能够轻松对组件进行测试的关键所在.在本文中我们将会解释AngularJS ...

  5. AngularJS 中 Provider 的用法及区别

    在一个分层良好的 Angular 应用中,Controller 这一层应该很薄.也就是说,应用里大部分的业务逻辑和持久化数据都应该放在 Service 里. 为此,理解 AngularJS 中的几个 ...

  6. [转]ionic或者angularjs中图片显示压缩问题解决 or 显示较大图片的某一块区域、裁剪显示

    我们知道在html中显示图片一般都是用img控件标签,当然调整大小的也很容易. 但是会出现,特定的img大小,显示一张比较大尺寸的且长宽比例与特定img大小不相符的图片.而导致压缩问题,图片挤压的很严 ...

  7. AngularJS中get请求URL出现跨域问题

    今天早上帮助同学看了一个AngularJS的问题,主要是请求中出现了跨域访问,请求被阻止. 下面是她给我的代码: <html lang="en" ng-app="m ...

  8. AngularJS 中的Promise --- $q服务详解

    先说说什么是Promise,什么是$q吧.Promise是一种异步处理模式,有很多的实现方式,比如著名的Kris Kwal's Q还有JQuery的Deffered. 什么是Promise 以前了解过 ...

  9. AngularJS中的表单验证

    AngularJS中的表单验证 AngularJS自带了很多验证,什么必填,最大长度,最小长度...,这里记录几个有用的正则式验证 1.使用angularjs的表单验证 正则式验证 只需要配置一个正则 ...

随机推荐

  1. 2016 湖南省省赛B题《有向无环图》

    题目链接[https://vjudge.net/problem/CSU-1804] 题意: 给出一个有向无环图,然后让你算下面的结果,count(i,j)表示i->j之间的路径条数. 题解: 根 ...

  2. NOIP2017 D1T2时间复杂度

    这道题在考试时看到感觉与第一题放反了位置(因为我还没有看到第一题是结论题) 对于每个语句进行栈的模拟,而如果有语法错误就特判. 对于每一条for语句我们将其与栈顶元素连边,复杂度是1的我们不用考虑,如 ...

  3. 【筛法求素数】【推导】【组合数】UVALive - 7642 - Prime Distance

    题意:n个格子,m个球,让你把球放入某些格子里,使得所有有球的格子之间的距离(abs(i-j))均为素数 ,让你输出方案数. 只占一个格子或者两个格子显然可行. 占有三个格子的情况下,则必须保证其中两 ...

  4. 25.最小生成树（kruskal算法）

    时间限制: 1 s 空间限制: 128000 KB 题目等级 : 白银 Silver 题解 查看运行结果 题目描述 Description 农民约翰被选为他们镇的镇长!他其中一个竞选承诺就是在镇上建立 ...

  5. hdu 4111 Alice and Bob 记忆化搜索 博弈论

    Alice and Bob Time Limit: 20 Sec  Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?pi ...

  6. 也谈时间管理和GTD

    也谈时间管理和GTD 时间管理 随着事情越来约多发现时间越来越不够用了,但是其实每天时间都是恒定的,并不增也不减,所以感觉时间不够用了总归只是个人主观感觉. 对我个人帮助比较大的是三本书<番茄时 ...

  7. 关于arcgi s_api_for_flex的总结

    1.flex 的简介 a) Flex是adobe开发的东西,主要特点就是开发一个swf格式的应用,flex可以做桌面的应用和web的应用,但本质差不多. b) Flex采用mxml的格式来进行应用的布 ...

  8. ExtJS表格——行号、复选框、选择模型

    本篇的内容是为表格添加行号,和复选框,最后谈一下Ext的选择模型.内容比较简单,就直接上代码了.一. 设置行号   行号的设置主要问题在于删除某一行后需要重新计算行号  Ext.onReady(fun ...

  9. Ext.js 中 25种类型的Ext.panel.Tool

    通过Ext.panel.Panel的tools配置项来设置Ext.panel.Tool实例. 要注意的一点是,Ext框架提供的Ext.panel.Tool仅包含按钮图标而具体的点击事件处理函数需要我们 ...

  10. How to let TVirtualStringTree to display an icon in disabled state?

    How to let TVirtualStringTree to display an icon in disabled state? I need to display files in a dir ...