UI-Bootstrap 模态对话框示例

官网API: 点击打开链接

一、JS代码示例

define([ '{angular}/angular' ], function(angular) {
    'use strict';

    var optionList = angular.module('OptionList', [ 'ngResource' ]);

    optionList.controller('DictionaryOptionListCtrl', [ '$scope', '$resource', '$location','$modal','optionService','colorService', 'NotificationService',
            function($scope, $resource, $location,$modal, optionService,colorService, notificationService) {

                optionService.query({}, function(data) {
                    $scope.optionData = data;
                });
                
             // -----------search by reference---------------  
                $scope.search = function() {
                    optionService.query({
                        searchText : $scope.searchText
                    }, function(data) {                        
                        $scope.optionData = data;
                    }, function() {
                    });
                };
                $scope.$watch('searchText', function(newValue, oldValue) {
                    if (newValue === oldValue)
                        return;
                    if ($.trim(newValue).length === 0) {
                        optionService.query({}, function(data) {
                            $scope.optionData = data;
                        });
                    }
                });

                //------------create option------------------
                $scope.openCreateDictionaryOptionPopup = function () {
                    var modalInstance = $modal.open({
                      animation: true,
                      templateUrl: 'vehicle/views/option/create.html',
                      controller: 'OptionModalCreateCtrl',
                      size: 'lg',
                      resolve: {
                          optionObject: function() {
                              return $scope.optionObject;
                          }
                      }
                    });
                    modalInstance.result.then(function (optionObject) {
                        optionService.save({}, optionObject, function() {
                            $scope.optionData.push(angular.copy(optionObject, {}));
                        }, function() {
                        });
                    });
                  };       
                
                // -----------select row---------------
                $scope.currentSelectedRowEntity;
                $scope.selectRow = function(item) {
                    $scope.currentSelectedRowEntity = item;
                };
                
                // -----------update modal dialog---------------
                $scope.tempRowEntityForUpdate = {};
                $scope.openUpdateModal = function () {
                  var modalInstance = $modal.open({
                    animation: true,
                    templateUrl: 'vehicle/views/option/update.html',
                    controller: 'OptionModalUpdateCtrl',
                    size: 'lg',
                    resolve: {
                        optionObject: function() {
                            angular.copy($scope.currentSelectedRowEntity, $scope.tempRowEntityForUpdate);
                            return $scope.tempRowEntityForUpdate;
                        }
                    }
                  });
                  modalInstance.result.then(function (optionObject) {
                      optionService.update({}, optionObject, function(data) {
                          if(data.error){
                              for (var i = 0; i < data.errorList.length; i++) {
                                  notificationService.alert(" Update failure! Caused by:"+data.errorList[i]);
                              }
                          }else{
                              angular.copy(optionObject, $scope.currentSelectedRowEntity);
                          }
                      });
                  });
                };      
        
                // -------show the delete modal dialog---------
                $scope.openDeleteOptionPopup = function () {
                    var modalInstance = $modal.open({
                      animation: true,
                      templateUrl: 'vehicle/views/option/confirmDelete.html',
                      controller: 'OptionModalDeleteCtrl'
                    });
                    modalInstance.result.then(function () {
                        optionService.remove({}, {
                            optionId : $scope.currentSelectedRowEntity.reference
                        }, function(data) {
                            if(data.notice==="OptionNotDeleted"){
                                notificationService.alert("This Option is referenced, can not delete!");
                            }else{
                                for (var i = 0; i < $scope.optionData.length; i++) {
                                    if ($scope.optionData[i] === $scope.currentSelectedRowEntity) {
                                        $scope.optionData.splice(i, 1);
                                        $scope.currentSelectedRowEntity = null;
                                        break;
                                    }
                                }
                                
                            }
                        });
                    });
                  }; 
            } ]);

    optionList.controller('OptionModalCreateCtrl', [ '$scope', '$modalInstance', 'optionObject', function ($scope, $modalInstance, optionObject) {

          $scope.optionObject = optionObject;

          $scope.ok = function () {
              $modalInstance.close($scope.optionObject);
          };

          $scope.cancel = function () {
              $modalInstance.dismiss('cancel');
          };
      }]);
   
    optionList.controller('OptionModalUpdateCtrl', [ '$scope', '$modalInstance', 'optionObject', function ($scope, $modalInstance, optionObject) {
        
        $scope.optionObject = optionObject;
        // set readony for update
        $scope.mode="update";
        
        $scope.ok = function () {
            $modalInstance.close($scope.optionObject);
        };
        
        $scope.cancel = function () {
            $modalInstance.dismiss('cancel');
        };
    }]);
    
    optionList.controller('OptionModalDeleteCtrl', [ '$scope', '$modalInstance', function ($scope, $modalInstance) {

        $scope.ok = function () {
            $modalInstance.close();
        };

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

    return {
        angularModules : [ 'OptionList' ]
    };

});

二、update.html

<div class="modal-header">
	<h3 class="modal-title">Update Option</h3>
</div>

<form name="optionUpdateForm" novalidate class="form-horizontal">
	<div class="modal-body">
		<div data-ng-include="'vehicle/views/option/<span style="background-color: rgb(255, 255, 51);">templateCreateUpdate</span>.html'"
			data-ng-init="optionForm=optionUpdateForm"></div>
	</div>
	<div class="modal-footer">
		<button class="btn btn-primary" data-ng-click="ok()"
			data-ng-disabled="optionUpdateForm.$invalid">Save</button>
		<button class="btn btn-warning" data-ng-click="cancel()">Cancel</button>
	</div>

</form>

三、confirmDelete.html

<div class="modal-header">
	<h3 class="modal-title">Warning</h3>
</div>
<div class="modal-body">
	<p>Are your sure to delete the option ?</p>
</div>
<div class="modal-footer">
	<button class="btn btn-primary" data-ng-click="ok()">OK</button>
	<button class="btn btn-danger" data-ng-click="cancel()">Cancel</button>
</div>

四、templateCreateUpdate.html

<div class="container-fluid">
    <div class="row">
        <div class="col-md-5">
            <div class="form-group" data-ng-class="{ 'has-error': optionForm.reference.$touched && optionForm.reference.$invalid }">
                <label for="reference" class="control-label">Reference</label> 
                <input type="text" class="form-control" id="reference" name="reference" data-ng-model="optionObject.reference" data-ng-readonly="mode==='update'"  required>
                <div class="help-block"  data-ng-messages="optionForm.reference.$error" data-ng-if="optionForm.reference.$touched && optionForm.reference.$invalid">
                    <p data-ng-message="required">Reference is required.</p>
                </div>
            </div>
        </div>
        <div class="col-md-5 col-md-offset-1">
            <div class="form-group" data-ng-class="{ 'has-error':  optionForm.name.$touched &&  optionForm.name.$invalid }">
                <label for="name" class="control-label">Name</label> 
                <input type="text" class="form-control" id="name" name="name"  data-ng-model="optionObject.name" required>
                <div class="help-block" data-ng-messages=" optionForm.name.$error" data-ng-if=" optionForm.name.$touched  &&  optionForm.name.$invalid">
                    <p data-ng-message="required">Name is required.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-5">
            <div class="form-group" data-ng-class="{ 'has-error':  optionForm.description.$touched && optionForm.description.$invalid }">
                <label for="description" class="control-label">Description</label> 
                <input type="text" class="form-control" id="description"  name="description" data-ng-model="optionObject.description" required>
                <div class="help-block" data-ng-messages=" optionForm.description.$error" data-ng-if="optionForm.description.$touched && optionForm.description.$invalid">
                    <p data-ng-message="required">Description is required.</p>
                </div>
            </div>
        </div>
    </div>

五、create.html

<div class="modal-header">
	<h3 class="modal-title">Create Option</h3>
</div>

<form name="optionCreateForm" novalidate class="form-horizontal" data-ng-init="option={}" novalidate>
	<div class="modal-body">
		<div data-ng-include="'vehicle/views/option/templateCreateUpdate.html'"
			data-ng-init="optionObject=option;optionForm=optionCreateForm"></div>
	</div>
	<div class="modal-footer">
		<button class="btn btn-primary" data-ng-click="ok()"
			data-ng-disabled="optionCreateForm.$invalid">Save</button>
		<button class="btn btn-warning" data-ng-click="cancel()">Cancel</button>
	</div>

</form>

六、总结

1.  首先需要导入angular.js ui-bootstrap-tpls-0.13.1.js
2. 以创建为例：
   <form name="optionCreateForm" novalidate class="form-horizontal"data-ng-init="option={}" novalidate>
      <div class="modal-body">
           <div data-ng-include="'vehicle/views/option/templateCreateUpdate.html'"
               data-ng-init="optionObject=option;optionForm=optionCreateForm"></div>
       </div>
   通过页面的初始化操作，动态的将option对象赋值给optionObject, 将当前的表名optionCreateForm 赋值给optionForm
   
   使用：
   <div class="form-group" data-ng-class="{ 'has-error': optionForm.reference.$touched && optionForm.reference.$invalid }">
                   <label for="reference" class="control-label">Reference</label>
                   <input type="text" class="form-control" id="reference" name="reference" data-ng-model="optionObject.reference" data-ng-readonly="mode==='update'"  required>
                   <div class="help-block"  data-ng-messages="optionForm.reference.$error" data-ng-if="optionForm.reference.$touched && optionForm.reference.$invalid">
                       <p data-ng-message="required">Reference is required.</p>
                   </div>
               </div>
   
   这样就能达到了动态切换，也就是create 和update都能使用同一个模板。