使用ionic中的侧边栏以及angularjs中广播的使用

时间：2023-03-08 19:15:15

接着之前的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

相关文章