angularJS如何實現(xiàn)模態(tài)框$modal-創(chuàng)新互聯(lián)
小編給大家分享一下angularJS如何實現(xiàn)模態(tài)框$modal，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
1.引入$modal模塊
如：angular.module('ModalCtrl',['$modal' ,'$scope' , function($modal ,$scope ){ }]);
2.執(zhí)行調(diào)模態(tài)框 函數(shù)
$scope.editModule = function(type, size, id) {
$scope.id = id;
var modalInstance = $modal.open({
templateUrl: 'tpl/weichat_modulebaseinfo.html', //template:'html元素模板',
controller: 'EditModuleCtrl', // 初始化模態(tài)范圍
size: size, //大小配置
scope: '一個作用域為模態(tài)的內(nèi)容使用（$modal會創(chuàng)建一個當前作用域的子作用域,scope可有可無）默認為$rootScope',
resolve: {
items: function() {
return $scope.id; //向模態(tài)框控制器中傳值
}
}
background: '', //控制背景，true(有) or false(無)，static背景存在，但是點擊模態(tài)窗口之外，模態(tài)窗不關(guān)閉
keyboard: '', //按下Esc時，模態(tài)對話框是否關(guān)閉，默認為ture
windowClass: '' //指定一個class并被添加到模態(tài)窗口中
});
modalInstance.result.then(function(selectedItem) { //模態(tài)框關(guān)閉后返回函數(shù)，selectedItem為返回值
})
}3.創(chuàng)建模態(tài)框控制器
app.controller('EditModuleCtrl', ['$scope', '$modalInstance', 'BookService', '$stateParams', 'items', function($scope, $modalInstance, BookService, $stateParams, items) { //依賴于modalInstance
//items為傳過來的值
$scope.modalBack = function() {
//執(zhí)行模態(tài)框內(nèi)部操作
}
$scope.ok = function() {
$modalInstance.close($scope.textid); //關(guān)閉并返回當前選項
};
$scope.cancel = function() {
$modalInstance.dismiss('cancel'); // 退出不執(zhí)行任何操作
}
}])以上是“angularJS如何實現(xiàn)模態(tài)框$modal”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道！
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
本文題目：angularJS如何實現(xiàn)模態(tài)框$modal-創(chuàng)新互聯(lián)
標題URL：http://m.jiaotiyi.com/article/hccoi.html