接着之前的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 + " 传过来内容：" + text); }); }); </script> </body> </html>
menu.html和dash.html页面不变
发送广播，使用$scope.$broadcast
接收广播，使用$scope.$on