angularJS模態(tài)框$modal實例代碼
更新時間:2017年05月27日 10:25:11 作者:Drongguang
本篇文章主要介紹了angularJS模態(tài)框$modal實例代碼,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
1.引入$modal模塊
如:angular.module('ModalCtrl',['$modal' ,'$scope' , function($modal ,$scope ){ }]);
2.執(zhí)行調模態(tài)框 函數
$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)的內容使用($modal會創(chuàng)建一個當前作用域的子作用域,scope可有可無)默認為$rootScope',
resolve: {
items: function() {
return $scope.id; //向模態(tài)框控制器中傳值
}
}
background: '', //控制背景,true(有) or false(無),static背景存在,但是點擊模態(tài)窗口之外,模態(tài)窗不關閉
keyboard: '', //按下Esc時,模態(tài)對話框是否關閉,默認為ture
windowClass: '' //指定一個class并被添加到模態(tài)窗口中
});
modalInstance.result.then(function(selectedItem) { //模態(tài)框關閉后返回函數,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)框內部操作
}
$scope.ok = function() {
$modalInstance.close($scope.textid); //關閉并返回當前選項
};
$scope.cancel = function() {
$modalInstance.dismiss('cancel'); // 退出不執(zhí)行任何操作
}
}])
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
AngularJS中ng-options實現下拉列表的數據綁定方法
今天小編就為大家分享一篇AngularJS中ng-options實現下拉列表的數據綁定方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
Angular.js中ng-include用法及多標簽頁面的實現方式詳解
這篇文章主要給大家介紹了在Angular.js中ng-include用法及多標簽頁面的實現方式的相關資料,文中通過示例代碼介紹的非常詳細,相信對大家具有一定的參考學習價值,需要的朋友們下面隨著小編一起來學習學習吧。2017-05-05
angularjs下ng-repeat點擊元素改變樣式的實現方法
今天小編就為大家分享一篇angularjs下ng-repeat點擊元素改變樣式的實現方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09

