ng中在主頁面彈出bootstrap的modal

modal.html

<link rel="stylesheet" href="css/comm/modal.css">
<!--修改審委會模態框-->
<div class="modal-header">
  <span class="close" ng-click="cancel()">&times;</span>
  <h3>修改審委會</h3>
</div>
<div class="modal-body">
  <form id="form1" class="form-horizontal" style="width:100%;height:100%">
    <input type="hidden" name="operator" id="operator" value="${sessionScope.currentUser.name}"/>
    <div class="form-group">
      <label for="name" class="control-label col-sm-2 col-md-2">審委會名稱:</label>
      <div class="col-sm-4 col-md-4">
        <div class="row">
          <div class="col-xs-12">
            <input type="text" class="form-control" name="name" id="name">
          </div>
        </div>
      </div>
      <label for="courtName" class="control-label col-sm-2 col-md-2">所屬法院:</label>
      <div class="col-sm-4 col-md-4">
        <select class="form-control" name="courtCode" id="court">
          <c:forEach items="${courtList}" var="court">
            <option value="${court.courtCode}">福州中院</option>
          </c:forEach>
        </select>
      </div>
    </div>
    <div class="form-group">
      <label for="account" class="control-label col-sm-2 col-md-2">審委會賬號:</label>
      <div class="col-sm-4 col-md-4">
        <div class="row">
          <div class="col-xs-12">
            <input type="text" class="form-control" name="account" id="account">
          </div>
        </div>
      </div>
      <label for="url" class="control-label col-sm-2 col-md-2">審委會URL:</label>
      <div class="col-sm-4 col-md-4">
        <div class="row">
          <div class="col-xs-12">
            <input type="text" class="form-control" name="url" id="url">
          </div>
        </div>
      </div>
    </div>
    <div class="form-group">
      <label for="description" class="control-label col-sm-2 col-md-2">審委會描述:</label>
      <div class="col-sm-10 col-md-10">
        <textarea  class="form-control" rows=2 name="description" id="description"></textarea>
      </div>
    </div>
    <div class="form-group">
      <label for="password" class="control-label col-sm-2 col-md-2">審委會密碼:</label>
      <div class="col-sm-4 col-md-4">
        <div class="row">
          <div class="col-xs-12">
            <input type="password" class="form-control" name="password" id="password">
          </div>
        </div>
      </div>
      <label for="pwdConfirm" class="control-label col-sm-2 col-md-2">密碼確認:</label>
      <div class="col-sm-4 col-md-4">
        <div class="row">
          <div class="col-xs-12">
            <input type="password" class="form-control" name="pwdConfirm" id="pwdConfirm">
          </div>
        </div>
      </div>
    </div>
    <div class="form-group">
      <label for="databaseServer" class="control-label col-sm-2 col-md-2">服務器:</label>
      <div class="col-sm-4 col-md-4">
        <div class="row">
          <div class="col-xs-12">
            <input type="text" class="form-control" name="databaseServer" id="databaseServer">
          </div>
        </div>
      </div>
      <label for="databaseName" class="control-label col-sm-2 col-md-2">數據庫:</label>
      <div class="col-sm-4 col-md-4">
        <div class="row">
          <div class="col-xs-12">
            <input type="text" class="form-control" name="databaseName" id="databaseName">
          </div>
        </div>
      </div>
    </div>
    <div class="form-group">
      <label for="databaseAccount" class="control-label col-sm-2 col-md-2">用戶名:</label>
      <div class="col-sm-4 col-md-4">
        <div class="row">
          <div class="col-xs-12">
            <input type="text" class="form-control" name="databaseAccount" id="databaseAccount">
          </div>
        </div>
      </div>
      <label for="databasePassword" class="control-label col-sm-2 col-md-2">密碼:</label>
      <div class="col-sm-4 col-md-4">
        <div class="row">
          <div class="col-xs-12">
            <input type="password" class="form-control" name="databasePassword" id="databasePassword">
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
<div class="modal-footer">
  <button class="btn btn-primary" ng-click="ok()">
    確認
  </button>
  <button class="btn btn-warning" ng-click="cancel()">退出</button>
</div>

子頁面

<script type="text/ng-template" id="myModalRevise.html">
  <div ng-include="'custom/committee/revise_modal.html'"></div>
</script>

<button class="btn" ng-controller="reviseModalCtrl" ng-click="openRevise('md')">修改</button>

定義modal控制器

//定義模態框實例
app.controller('ModalInstanceCtrl',['$scope','$modalInstance','items',function ($scope,$modalInstance,items) {
    $scope.items=items;
    $scope.selected = {
        item : $scope.items[0]
    };
    $scope.ok = function () {
        $modalInstance.close($scope.selected.item);
    };
    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };
}]);
//定義修改模態框控制器
app.controller('reviseModalCtrl', function ($scope, $modal, $log) {
    $scope.items = ['item1', 'item2', 'item3'];
   // $scope.animationsEnabled = true;
    $scope.openRevise= function (size) {
        var modalInstance = $modal.open({
            animation: $scope.animationsEnabled,
            templateUrl: 'myModalRevise.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;
    };
});