使用ionic中的側邊欄以及angularjs中廣播的使用

魔豆發表於2016-09-21
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

相關文章