AngularJS 模態對話框

時間 2019-11-06

原文原文鏈接

本文內容

項目結構
運行結果
index.html
mymodal.js
參考資料

本文講解 Angular JS 實現模式對話框。基於 AngularJS v1.5.三、Bootstrap v3.3.6 和 ui-bootstrap-tpls 0.11。ui-bootstrap-tpls 是 AngularJS 利用 bootstrap 封裝的控件——AngularJS-ui-bootstrap，網上控件大都利用它，github 上有源代碼。css

最近研究 ELK，須要用 AngularJS 寫個 UI 出來，由於 Kibana 3 是用 AngularJS 寫的，我也選擇了 AngularJS。html

當時想，點擊頁面按鈕彈出個 DIV 出來，DIV 上有一些檢索條件，但是實現這個彈出 DIV 功能後，發現不會在 DIV 裏初始化時間控件，靠~react

爲了講解方便，源代碼都加了行號，因此，若是你想本身運行，能夠直接去 github 上下載 demo。git

下載 Demo

項目結構

圖 1 項目結構angularjs

運行結果

圖 2 運行結果：大模態 github

index.html

   1:  <!DOCTYPE html>

   2:  <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->

   3:  <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->

   4:  <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->

   5:  <!--[if gt IE 8]><!-->

   6:  <html class="no-js">

   7:  <!--<![endif]-->

   8:  <head>

   9:  <meta charset="UTF-8">

  10:  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  11:  <meta name="viewport" content="width=device-width">

  12:  <title>AngularJS 模態對話框</title>

  13:  <link rel="stylesheet"

  14:      href="../src/vendor/bootstrap/dist/css/bootstrap.css">

  15:  </head>

  16:  <body ng-app="myApp" class="body">

  17:      <!-- modal template -->

  18:      <script type="text/ng-template" id="myModelContent.html">

  19:          <div class="modal-header">

  20:              <h3 class="modal-title">模態框</h3>

  21:          </div>

  22:          <div class="modal-body">

  23:              <ul>

  24:                  <li ng-repeat="item in items">

  25:                  <a ng-click="selected.item = item">{{item}}</a>

  26:                  </li>

  27:                  <div class="h2">當前選擇： <b>{{selected.item}}</b></div>

  28:              </ul>

  29:          </div>

  30:          <div class="modal-footer">

  31:              <button class="btn btn-primary" ng-click="ok()">

  32:              確認

  33:              </button>

  34:              <button class="btn btn-warning" ng-click="cancel()">退出</button>

  35:          </div>

  36:      </script>

37:

  38:      <div class="container h1">AngularJS 模態對話框</div>

  39:      <section class="row">

  40:          <section ng-controller="modalDemo" class="col-md-6"

  41:              style="margin: 40px auto; float: none; background: #fff; padding: 30px;">

  42:              <button class="btn btn-default" ng-click="open('lg')">大模態</button>

  43:              <button class="btn btn-default" ng-click="open()">中模態</button>

  44:              <button class="btn btn-default" ng-click="open('sm')">小模態</button>

  45:              <hr>

  46:              <div class="h1" ng-show="selected">當前選擇：{{selected}}</div>

  47:          </section>

  48:      </section>

  49:      <!-- load js -->

  50:      <script src="../src/vendor/angular/angular.js"></script>

  51:      <script

  52:          src="http://cdn.bootcss.com/angular-ui-bootstrap/0.11.2/ui-bootstrap-tpls.js"></script>

  53:      <script src="../src/js/mymodal.js"></script>

  54:  </body>

  55:  </html>

說明：chrome

第2~7行，是關於 HTML 5（如下簡稱 H5）瀏覽器兼容的；

第9行，是設置頁面編碼，若是沒有，用 firefox 調試時，你看到編碼問題的提醒；

第十、11行，分別是關於 H5 在 Chrome、移動設備的設置；

第13行，是引入 bootstrap.css；

第16行，指定了 AngularJS 的 ng-app 屬性「myApp」；

第18~36行，是定義模態對話框的 H5 模板。注意，它在 scrpit 編輯裏，而且還起了名字「myModelContent.html」；

第38~48行，是頁面的三個按鈕，分別顯示大、中、小三個尺寸的模態對話框；

第40行，指定了 AngularJS 控制器 ng-controller 屬性爲「modalDemo」，代表這裏面有「動做」；

第42~44行，指定了 ng-click 屬性，代表了元素上有點擊事件。open 方法定義在後面的 mymodal.js 文件中；

第50~52行，加載 AngularJS 和 ui-bootstrap-tpls 腳本文件；

第53行，加載你本身的 mymodal.js 模態對話框的腳本文件。

mymodal.js

   1:  /**

   2:   *

   3:   */

   4:  angular.module('myApp', [ 'ui.bootstrap' ])

   5:  // demo controller

   6:  .controller('modalDemo', function($scope, $modal, $log) {

   7:      // list

   8:      $scope.items = [ 'angularjs', 'backbone', 'canjs', 'Ember', 'react' ];

   9:      // open click

  10:      $scope.open = function(size) {

  11:          var modalInstance = $modal.open({

  12:              templateUrl : 'myModelContent.html',

  13:              controller : 'ModalInstanceCtrl', // specify controller for modal

  14:              size : size,

  15:              resolve : {

  16:                  items : function() {

  17:                      return $scope.items;

  18:                  }

  19:              }

  20:          });

  21:          // modal return result

  22:          modalInstance.result.then(function(selectedItem) {

  23:              $scope.selected = selectedItem;

  24:          }, function() {

  25:              $log.info('Modal dismissed at: ' + new Date())

  26:          });

  27:      }

  28:  })

  29:  // modal controller

  30:  .controller('ModalInstanceCtrl', function($scope, $modalInstance, items) {

31:

  32:      $scope.items = items;

33:

  34:      $scope.selected = {

  35:          item : $scope.items[0]

  36:      };

  37:      // ok click

  38:      $scope.ok = function() {

  39:          $modalInstance.close($scope.selected.item);

  40:      };

  41:      // cancel click

  42:      $scope.cancel = function() {

  43:          $modalInstance.dismiss('cancel');

  44:      }

  45:  });

說明：bootstrap

第4行，在 AngularJS 裏定義你的 myApp 模塊，而且該模塊依賴 ui.bootstrap。ui.bootstrap 在 ui-bootstrap-tpls.js 腳本里；

第6行，定義模態對話框的控制器，參數 $scope、$modal、$log 都是 AngularJS 提供，分別是做用域、模態、日誌，但願在 function 裏使用；

第10~25行，定義打開模態對話框的 open 方法，這就是頁面裏 ng-click 調用的方法。而且，第13行，指定了模態對話框對應的控制器，接下來會定義；

第30行，是定義模態對話框的控制器，定了模態對話框中「肯定」和「取消」兩個事件的方法；

另外，AngularJS 中不用考慮對象建立問題，AngularJS 會自動進行注入依賴。