Angular 模態框 入坑記

今天用到了ui-bootstrap中的modal 覺得用起來還不錯，也比較簡單，博主以前用個ngDialog做的模態框，雖然不知道對不對，但這個插件也還可以。
這貌似是我目前爲止用過最簡單的功能了，所以博客內容也很簡單，大家一看就能懂~~
進入正題，老規矩放下官網的API，藍燈翻牆，就可以看了，當然還是純英文的，最近博主看多了，都習慣了。~~~

因爲博主用的是1.4*版本的angular 所以官網上的最新的是angular1.5 *的 請注意看ui-bootstrapp-tpl的版本，我寫的不是最新版本，版本不同代碼還是有差距的，畢竟1.5已經準備向2慢慢走了，很多不太一樣了，我沒仔細研究啊~好像沒$scope了，跟ng2靠攏了，但功能幾乎沒有太多差距。基本的模態框都是OK的

http://angular-ui.github.io/bootstrap/

首先看看都需要那些外部文件，如果你看最新版本的話，他會引入一個sanitize

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.0.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">

模態框比較簡單，我們直接上一個例子就行
在線代碼演示網站

Html

<div ng-controller="ModalDemoCtrl">
    <script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header">
            <h3 class="modal-title">I'm a modal!</h3>
        </div>
        <div class="modal-body">
            <ul>
                <li ng-repeat="item in items">
                    <a href="#" ng-click="$event.preventDefault(); selected.item = item">{{ item }}</a>
                </li>
            </ul>
            Selected: <b>{{ selected.item }}</b>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
            <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
        </div>
    </script>

    <button type="button" class="btn btn-default" ng-click="open()">Open me!</button>
    <button type="button" class="btn btn-default" ng-click="open('lg')">Large modal</button>
    <button type="button" class="btn btn-default" ng-click="open('sm')">Small modal</button>
    <button type="button" class="btn btn-default" ng-click="toggleAnimation()">Toggle Animation ({{ animationsEnabled }})</button>
    <div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>

先不看controller，先看我們的HTML頁面，我們分解來看

這個script裏就是我們的模態框的模板，相信用過bootstrap模態框的對標籤應該都不是很陌生

id="myModalContent.html"//用來識別如果我的頁面中有多個模態框，我們可以在js裏通過id來識別

ng-click="open('sm')" //我們有sm md lg 三種可選大小,這裏是模態框的大小

Js

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $uibModal, $log) {

  $scope.items = ['item1', 'item2', 'item3'];

  $scope.animationsEnabled = true;

  $scope.open = function (size) {

    var modalInstance = $uibModal.open({
      animation: $scope.animationsEnabled,
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      size: size,
      resolve: {
        items: function () {
          return $scope.items;
        }
      }
    });

    modalInstance.result.then(function (selectedItem) {
      $scope.selected = selectedItem;
    }, function () {
      $log.info('Modal dismissed at: ' + new Date());
    });
  };

  $scope.toggleAnimation = function () {
    $scope.animationsEnabled = !$scope.animationsEnabled;
  };

});

// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $uibModal service used above.

angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, items) {

  $scope.items = items;
  $scope.selected = {
    item: $scope.items[0]
  };

  $scope.ok = function () {
    $uibModalInstance.close($scope.selected.item);
  };

  $scope.cancel = function () {
    $uibModalInstance.dismiss('cancel');
  };
});

這裏面的ModalDemoCtrl 多數就是用來放open方法，還可能放的就是模態框成功後的方法modalInstance.result.then，這裏面寫的是模態框調用成功的方法。

$scope.items = ['item1', 'item2', 'item3'];//放進resolve將值傳進模態框的控制器中

resolve: {
        items: function () {
          return $scope.items;
        }
      }

父親控制器的值就是通過resolve傳進到子控制器也就是模態框的控制器

$uibModalInstance.close($scope.selected.item); //關閉模態框的方法，可以不傳參數

是不是感覺很簡單，但做的時候我倒是不推薦上面的用法，我們最好還是把共有的地方分離出來，下面是我的代碼，僅供借鑑

我用的是更老一點的版本只需要把$modal換成$uibModal就可以了

<span ng-controller="ModalAdd" class="pull-left">
        <script type="text/ng-template" id="myModalAdd.html">
           <div ng-include="'tpl/modal.addstu.html'"></div>
        </script>
    <button class="btn btn-info" ng-click="open('md')">增加學生</button>
 </span>

//博主有的版本更老一點需要把$modal換成$uibModal
app.controller('ModalAdd', ['$scope', '$modal', '$log', '$location', function($scope, $modal, $log, $location) {
    $scope.items = ['item1', 'item2', 'item3'];
    $scope.open = function (size) {
      var modalInstance = $modal.open({
        templateUrl: 'myModalAdd.html',
        controller: 'ModalAddCtrl',
        size: size,
        resolve: {
          items: function () {
            return $scope.items;
          }
        }
      });

      modalInstance.result.then(function (selectedItem) {
        $scope.selected = selectedItem;
        console.log(selectedItem)
      }, function () {
        $log.info('Modal dismissed at: ' + new Date());
      });
    };
  }])

這裏面唯一的變化就是我把原來的寫在界面裏的html單獨寫在了一個頁面裏這樣一來，我們減少了複製粘貼的重複工作，二來，如果模態框內容過多，不便於我們代碼的維護，我們會分不清主次代碼，所以還是分出來的好一些。。~~
這篇內容比較簡單，就介紹到這裏了~~