官网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都能使用同一个模板。