2000字范文,分享全网优秀范文,学习好帮手!
2000字范文 > 使用angularjs模态框$modal

使用angularjs模态框$modal

时间:2024-03-05 04:13:28

相关推荐

使用angularjs模态框$modal

使用angularjs提供的$modal可以快捷的创建新的弹出框,并且自带了一些比较好用的属性和方法,方便我们进行开发。

在开发中碰到的问题就是,当登录用户权限不同的时候,我们提供不同的权限控制和页面展示,当非管理员登录的时候,弹出的页面是不允许关闭的,即不允许用户

操作主页面的内容,只能在弹出框中操作。

属性: templateURL:指定加载模板路径 $scope:创建一个在弹出模板页面上的作用域 $controller:为$modal指定controller,初始化$scope resolve:定义一个成员并将它传递给$modal指定的控制器,相当于routes的一个resolve属性,如果需要传递一个object对象,需要使用angular.copy() backdrop:控制背景,默认true,false表示没有背景,显示空白。"static"--背景依然存在,但是点击模态框以外的地方,模态框不会消失 keyboard:true使用ESC键将会关闭模态框,false取消ESC键作用 windclass:为模态框添加样式

用例:

$scope.openAuthenticationViewPage = function(){singleModal.open({templateUrl: 'terminal/authentication/authentication-conf.html',//指定模板路径controller: 'TerminalAuthConfController',//指定controllersize:'lg',//模态框大小backdrop:true,//控制背景keyboard:false//禁用ESC键},function(result) {$scope.toggleManager.getauthinfo();},function(reason) {$scope.toggleManager.AuthViewInit();});};

下面是做了一个简单的封装,

.factory('singleModal', ['$modal', function($modal) {var vm = this;vm.modal = null;vm.draggable = function(){$(".modal-content").draggable({ handle: ".modal-header",cursor: 'move', refreshPositions: false }); };return {open: function(param,result_fc,reason_fc) {if (vm.modal != null) {return null;}vm.modal = $modal.open(param);vm.modal.result.then(function(result) {vm.modal = null;if(result_fc!= null){result_fc(result);}},function(reason){vm.modal = null;if(reason_fc!= null){reason_fc(reason);}});vm.modal.opened.then(function() { setTimeout(vm.draggable,3000);}); return vm.modal;}}}])

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。