如何在angular.js中优雅的使用ui.bootstrap的modal组件

angular.module('myApp.Controllers', [
 'ui.bootstrap'
])
.controller('appModalInstanceCtrl', function ($scope,$uibModalInstance,modalDatas) {
 var $ctrl = this;
 $scope.modalDatas = modalDatas; //双向绑定，方便在确认中回传可能修改的字段
 
 // $ctrl.insta
 $ctrl.ok = function (val) {
 $scope.modalDatas.result = val;
 $uibModalInstance.close(
 $scope.modalDatas //在模态框View中修改的值传递回去，view中可以直接添加属性
 );
 };
 
 $ctrl.cancel = function () {
 $uibModalInstance.dismiss('cancel');
 };
 })

<p class="modal-header">
 <h3 class="modal-title">标题</h3>
</p>

<p class="modal-body">
 <p class="content">
 <label class="label">确认信息：</label>
 <input type="text" ng-model="modalDatas.msg">
 </p>
 <p class="content">
 <label class="label">备注信息：</label>
 <input type="text" ng-model="modalDatas.content">
 </p>
 
</p>

<p class="modal-footer">
 <button class="btn btn-primary" type="button" ng-click="$ctrl.ok()">确定</button>
 <button class="btn btn-default" type="button" ng-click="$ctrl.cancel()">取消</button>
</p>

<button type='button' class='btn btn-primary' ng-click="openModal('md', 'confirm')">打开'confirm' modal</button>

还有很多属性，可以到官网查询，比如控制多层模态框等等。

$scope.openModel = function (size, type) {
 //type即view文件名，在同一个页面有多个不同业务的模态框的情况下很方便
 var tplUrl = './src/templates/modalViews/' + type + '.html';
 $scope.modalDatas = {
 msg: 'Hello World!'
 };

 var modalInstance = $uibModal.open({
 animation: true,
 ariaLabelledBy: 'modal-title',
 ariaDescribedBy: 'modal-body',
 templateUrl: tplUrl,
 controller: 'appModalInstanceCtrl',
 controllerAs: '$ctrl',
 size: size,
 resolve: {
 modalDatas: function () {
 return $scope.modalDatas;
 }
 }
 });
 modalInstance.result.then(function (datas) {
 // 点击确认按钮执行的代码
 //可以从datas中获取msg和content字段
 //进一步操作：发起http请求等 
 }, function () {
 // 点击取消按钮执行的代码
 console.info('Modal dismissed at: ' + new Date());
 });
 };