angular 动态组件类型详解(四种组件类型)


Posted in Javascript onFebruary 22, 2017

组件类型1:纯函数功能,而没有视图部分,即Factory(类似于$http)

promise.component.html

常见的有内置的$http,$q之类的。一般使用promise与作用域进行交互

组件类型2:不是常驻于视图,而是动态插入的、有UI的一类组件,有输入交互、不常被调用(类似于Model对话框)

factory.component.html

并发性。这里收到es6的启发。在factory内使用了构造函数,来区分不同的实例。当然,factory接口返回的类型要根据需求来定:仅仅是一个promise?还是返回一整个组件的实例

数据驱动。factory内部我使用了this.scope = $rootScope.$new()。并把每个实例的模板和作用域进行绑定$compile(html())(scope)。感谢毛总,这招真是方便。我们能够真正使用到angular的精髓:用数据来驱动我们的视图了

交互。该demo因为需要与用户进行交互,因此返回了一个promise给调用者。当然实际要看情况。

作用域。由于该组件并不常常需要被调用,因此一旦组件'close'(从视图上消失),就scope.$destroy()、instance.remove()

组件类型3:不常驻于视图,但会被经常调用,而且是动态插入的、无输入交互、有UI的一类组件(类似于popover)

factory.component2.html

对比。与上类型组件对比,该类组件更容易被调用(类似于微信右上角的popover)
并发性。要求更高,稍复杂。因此返回组件的实例,让开发者可用调用组件内部的方法(open/close/...)。同时,鉴于需求特殊性,在open()方法处我传入了$event作为UI参数

作用域。由于是隐藏地常驻与视图,因此只当路由切换时才注销实例。scope.$watch('$stateChangeSuccess', function(){scope.destroy()})

组件实例。赋值给作用域的变量 $scope.instance = Mypop.init()

组件类型4:实例之间存在某种关系、不常驻于视图,动态插入、只有视觉交互、有UI的一类组件(类似于ant design的Notification)

factory.component.3.html

对比。与上类组件对比,组件的每个实例之间需要存在某种队列关系,具体操作方法请参考上面的例子。

实例关系。如何维护实例之间的关系?笔者比较笨的方法是开启另一个factory实例,存放一个实例数据,来维护实例之间的关系var _sl = scope.list = []。然后该factory具备操作实例队列的一些方法 _sl.push(token)或者 _sl.shift()。同时每个实例都会监听这个实例队列 _s.$watchCollection('instanceList', function(){...})

Javascript 相关文章推荐
Javascript获取HTML静态页面参数传递值示例
Aug 18 Javascript
JQuery 设置checkbox值二次无效的解决方法
Jul 22 Javascript
AngularJS自定义服务与fliter的混合使用
Nov 24 Javascript
js判断一个字符串是以某个字符串开头的简单实例
Dec 27 Javascript
Javascript实现页面滚动时导航智能定位
May 06 Javascript
把vue-router和express项目部署到服务器的方法
Feb 21 Javascript
Vue.directive使用注意(小结)
Aug 31 Javascript
微信小程序生成分享海报方法(附带二维码生成)
Mar 29 Javascript
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 jQuery
Vue表单控件数据绑定方法详解
Feb 05 Javascript
基于vue 动态菜单 刷新空白问题的解决
Aug 06 Javascript
使用vue3重构拼图游戏的实现示例
Jan 25 Vue.js
javascript 使用正则test( )第一次是 true,第二次是false
Feb 22 #Javascript
JavaScript实现256色转灰度图
Feb 22 #Javascript
在javascript中,null>=0 为真,null==0却为假,null的值详解
Feb 22 #Javascript
微信小程序 扎金花简单实例
Feb 21 #Javascript
angular中的http拦截器Interceptors的实现
Feb 21 #Javascript
微信小程序 PHP生成带参数二维码
Feb 21 #Javascript
vue-resource 拦截器使用详解
Feb 21 #Javascript
You might like
thinkPHP分组后模板无法加载问题解决方法
2016/07/12 PHP
thinkPHP显示不出验证码的原因与解决方法分析
2017/05/20 PHP
总结一些PHP中好用但又容易忽略的小知识
2017/06/02 PHP
翻译整理的jQuery使用查询手册
2007/03/07 Javascript
用javascript自动显示最后更新时间
2007/03/15 Javascript
javascript事件模型代码
2007/07/01 Javascript
jQuery 1.8 Release版本发布了
2012/08/14 Javascript
jQuery中wrapInner()方法用法实例
2015/01/16 Javascript
jquery实现TAB选项卡鼠标经过带延迟效果的方法
2015/07/27 Javascript
微信小程序 弹框和模态框实现代码
2017/03/10 Javascript
JavaScript实现隐藏省略文字效果的方法
2017/04/27 Javascript
解决layui中table异步数据请求不支持自定义返回数据格式的问题
2018/08/19 Javascript
jQuery实现评论模块
2020/08/19 jQuery
Nuxt的动态路由和参数校验操作
2020/11/09 Javascript
[03:44]2014DOTA2国际邀请赛 71专访:DK战队赛前讨论视频遭泄露
2014/07/13 DOTA
python ip正则式
2009/05/07 Python
python提取页面内url列表的方法
2015/05/25 Python
Python 两个列表的差集、并集和交集实现代码
2016/09/21 Python
python绘制已知点的坐标的直线实例
2019/07/04 Python
使用Django搭建web服务器的例子(最最正确的方式)
2019/08/29 Python
python实现代码统计程序
2019/09/19 Python
Python读取分割压缩TXT文本文件实例
2020/02/14 Python
python GUI库图形界面开发之PyQt5窗口背景与不规则窗口实例
2020/02/25 Python
香港演唱会订票网站:StubHub香港
2019/10/10 全球购物
简历中个人求职的自我评价模板
2013/11/29 职场文书
名企HR怎样看待求职信
2014/02/23 职场文书
目标责任书范文
2014/04/14 职场文书
技术合作协议书范本
2014/04/18 职场文书
遵纪守法演讲稿
2014/05/23 职场文书
服务理念标语
2014/06/18 职场文书
2014新生大学四年计划书
2014/09/21 职场文书
2014领导班子专题民主生活会对照检查材料思想汇报
2014/09/23 职场文书
庆祝教师节主持词
2015/07/06 职场文书
2017公司年会主持人开幕词
2016/03/04 职场文书
Python爬虫爬取全球疫情数据并存储到mysql数据库的步骤
2021/03/29 Python
在HTML中引入CSS的几种方式介绍
2021/12/06 HTML / CSS