angularJS模态框$modal实例代码

1.引入$modal模块

如:angular.module('ModalCtrl',['$modal','$scope',function($modal,$scope ){ }]);

2.执行调模态框 函数

rush:js;"> $scope.editModule = function(type,size,id) { $scope.id = id; var modalinstance = $modal.open({ templateUrl: 'tpl/weichat_modulebaseinfo.html',//template:'html元素模板',controller: 'EditModuleCtrl',// 初始化模态范围 size: size,//大小配置 scope: '一个作用域为模态的内容使用($modal会创建一个当前作用域的子作用域,scope可有可无)认为$rootScope',resolve: { items: function() { return $scope.id; //向模态框控制器中传值 } } background: '',//控制背景,true(有) or false(无),static背景存在,但是点击模态窗口之外,模态窗不关闭 keyboard: '',//按下Esc时,模态对话框是否关闭认为ture windowClass: '' //指定一个class并被添加到模态窗口中

});

modalinstance.result.then(function(selectedItem) { //模态框关闭后返回函数,selectedItem为返回值

})
}

3.创建模态框控制器

rush:js;"> app.controller('EditModuleCtrl',['$scope','$modalinstance','BookService','$stateParams','items',function($scope,$modalinstance,BookService,$stateParams,items) { //依赖于modalinstance //items为传过来的值 $scope.modalBack = function() { //执行模态框内部操作 }
$s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.ok = function() { 
  $mo<a href="https://www.jb51.cc/tag/dali/" target="_blank" class="keywords">dali</a>nstance.close($s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.textid); //<a href="https://www.jb51.cc/tag/guanbi/" target="_blank" class="keywords">关闭</a>并返回当前选项 
}; 
$s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.cancel = function() { 
  $mo<a href="https://www.jb51.cc/tag/dali/" target="_blank" class="keywords">dali</a>nstance.<a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>miss('cancel'); // <a href="https://www.jb51.cc/tag/tuichu/" target="_blank" class="keywords">退出</a>不执行任何操作 
} 

}])

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

相关文章

什么是深拷贝与浅拷贝?深拷贝与浅拷贝是js中处理对象或数据...
前言 今天复习了一些前端算法题,写到一两道比较有意思的题:...
最近在看回JavaScript的面试题,this 指向问题是入坑前端必须...
js如何实现弹出form提交表单?(图文+视频)
js怎么获取复选框选中的值
js如何实现倒计时跳转页面