angularjs中的ui.bootstrap的modal元件可以很方便地實作頁面controller與模態框controller之間通信，特別是彈出的模態框中有比較複雜的表格資訊需要用戶填寫，下面切入主題：
註冊全域模態框實例的controller
#
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');
};
})新範本檔案src/templates/modalViews/confirm.html
<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>
#在管理頁面出發程式碼的controller中註冊openModal函數
使用ui .bootstrap提供的服務$uibModal來建立模態框，只需要簡單的配置模態框視圖和控制器。 $uibModal提供唯一的方法open(options)配置。 （想看更多就到PHP中文網AngularJS開發手冊中學習）
options參數：
##animation (Type: boolean, Default: true) 模態框開啟/關閉動畫控制
appendTo (Type: angular.element, Default: body) 指定將模式框程式碼插入位置，預設插入到body
backdrop (Type: boolean|string, Default: true) 遮罩層顯示控制
backdropClass (Type: string) 為遮罩層添加額外class
bindToController (Type: boolean, Default: false) - 當使用controllerAs（例如設定為$ctrl） 且此屬性設為true時,可以把$scope綁定到controller.主意$scope是能夠管理模態框的scope,也就是說，如果模態框預設插入到body，那麼會將管理body標籤的控制器綁定到$ctrl,所以最好結合appendTo一起使用。
component (Type: string, Example: myComponent) 將模態方塊當作元件方式使用
controller (Type: function|string|array, Example: MyModalController)指定模態框控制器
controllerAs (Type: string, Example: ctrl) 控制器別名
resolve (Type: Object) - 給模態框傳遞數據; templateUrl (Type: string) 指定模態框視圖層模板
size (Type: string, Example: lg) 指定模態框大小
<strong>还有很多属性，可以到官网查询，比如控制多层模态框等等。</strong>
$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());
});
};AngularJS使用手冊中學習），有問題的可以在下方留言提問。
以上是如何在angular.js中優雅的使用ui.bootstrap的modal元件的詳細內容。更多資訊請關注PHP中文網其他相關文章！
