angular之modal实现
2015-09-29 00:00
519 查看
方法一:bootstrap实现
对于bootstrap的实现,感觉功能比较多,比较复杂,不建议实现。方法二:自己阉割实现
angular.module('myModal',[]).provider('Modal',function($injector){ this.$get = function($document.$compile,$http,$templateCache,$rootScope,$controller,$q){ var Modal = function(){ _.bindAll(this,'close','dismiss','stop'); this.defer = $q.defer(); this.result = this.defer.promise; } Modal.openedItems = 0; Modal.open = function(options){ Modal.openedItems++; var modal = new Modal(); var templatePromise = $http.get(options.templateUrl,{cache:$templateCache}); var resolvePromise = function(){ var promiseArr = []; angular.forEach(options.resolve || {},function(value,key){ if(angular.isFunction(value) || angular.isArray(value)){ promiseArr.push($q.when($injector.invoke(value))); } }) return promiseArr; } } var promises = $q.all([templatePromise].concat(resolvePromise())); promises.then(function(tplAndVars){ var body = $document.find('body').eq(0); var element = angular.elemet('<div class="cover-wrap"></div>' + tplAndVars[0].data); var modalScope = (options.scope || $rootScope).$new(); modalScope.$close = modal.close; modalScope.$dismiss = modal.dismiss; modalScope.$stop = modal.stop; var ctrlLocals = {}; var resolveIter = 1; angular.forEach(options.resolve,function(value,key){ ctrlLocals[key] = tplAndVars[resolveIter++]; }); ctrlLocals.$scope = modalScope; ctrlLocals.$modal = modal; $controller(options.controller,ctrlLocals); var angularElement = $compile(element)(modalScope); body.append(angularElement); modal.element = angularElement; modal.$scope = modalScope; }); return modal; } })
相关文章推荐
- BootStrap Modal Create
- OC笔记 - tableView的编辑模式、UITabBarController(2015.3.20)
- 模态视图那些事(一)之 切换效果
- iOS开发 Modal弹出控制器简介
- ionic 项目中添加modal的步骤流程
- bootstrap modal 弹窗 数据清除
- iWatch 页面导航
- bootstarp modal自动调整宽度的JS代码
- 另一种控制器切换的方式→Modal
- IOS modal介绍
- Bootstrap modal
- 用Bootstrap框架弹出iframe页面 在弹出的模态框中载人iframe页面
- Qt modal & modalless
- Storyboard里面的几种Segue区别及视图的切换:push,modal,popover,replace和custom
- iOS_16_控制器切换_modal_代码方式
- iOS_16_控制器切换_modal_storyboard拖线的方式
- extjs 模态窗口问题(window modal z index)
- angular之filter的几种调用方式
- Tip:Modal UpdateProgress的轻量级解决方案
- Modal Panel