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 相关文章推荐
基于jquery的仿百度搜索框效果代码
Apr 11 Javascript
jQuery循环滚动展示代码 可应用到文字和图片上
May 11 Javascript
jQuery操作input type=radio的实现代码
Jun 14 Javascript
javascript操作select元素实例分析
Mar 27 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
May 09 Javascript
基于javascript代码实现通过点击图片显示原图片
Nov 29 Javascript
使用React实现轮播效果组件示例代码
Sep 05 Javascript
基于JavaScript实现的顺序查找算法示例
Apr 14 Javascript
超级简易的JS计算器实例讲解(实现加减乘除)
Aug 08 Javascript
工作中常用到的ES6语法
Sep 04 Javascript
vue学习笔记之作用域插槽实例分析
Feb 01 Javascript
JQuery事件冒泡和默认行为代码实例
May 13 jQuery
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 一个页面使用2次分页的实现方法
2013/07/15 PHP
php单链表实现代码分享
2016/07/04 PHP
thinkphp的dump函数无输出实例代码
2016/11/15 PHP
获取页面高度,窗口高度,滚动条高度等参数值getPageSize,getPageScroll
2006/09/22 Javascript
JQuery Ajax通过Handler访问外部XML数据的代码
2010/06/01 Javascript
js自定义事件代码说明
2011/01/31 Javascript
ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)
2012/01/13 Javascript
jquery的ajax请求全面了解
2013/03/20 Javascript
Js与下拉列表处理问题解决
2014/02/13 Javascript
js css 实现遮罩层覆盖其他页面元素附图
2014/09/22 Javascript
EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码
2016/06/02 Javascript
JavaScript DOM 对象深入了解
2016/07/20 Javascript
原生js获取元素样式的简单方法
2016/08/06 Javascript
基于LayUI分页和LayUI laypage分页的使用示例
2017/08/02 Javascript
使用DataTable插件实现异步加载数据
2017/11/19 Javascript
vue项目打包上传github并制作预览链接(pages)
2019/04/19 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
2019/05/23 Javascript
vuex 实现getter值赋值给vue组件里的data示例
2019/11/05 Javascript
基于Vue的侧边目录组件的实现
2020/02/05 Javascript
解决vue单页面应用打包后相对路径、绝对路径相关问题
2020/08/14 Javascript
JavaScript实现简单日历效果
2020/09/11 Javascript
Python 多线程抓取图片效率对比
2016/02/27 Python
Python登录并获取CSDN博客所有文章列表代码实例
2017/12/28 Python
Python KMeans聚类问题分析
2018/02/23 Python
Python3实现爬取指定百度贴吧页面并保存页面数据生成本地文档的方法
2018/04/22 Python
python3 对list中每个元素进行处理的方法
2018/06/29 Python
Python requests库用法实例详解
2018/08/14 Python
elasticsearch python 查询的两种方法
2019/08/04 Python
科颜氏加拿大官方网站: Kiehl’s加拿大
2016/08/16 全球购物
viagogo波兰票务平台:演唱会、体育比赛、戏剧门票
2018/04/23 全球购物
JAVA招聘远程笔试题
2015/07/23 面试题
爱祖国爱家乡演讲稿
2014/09/02 职场文书
2016年党员干部公开承诺书
2016/03/24 职场文书
实习报告范文之电话客服岗位
2019/07/26 职场文书
使用feign服务调用添加Header参数
2021/06/23 Java/Android
MySQL基础快速入门知识总结(附思维导图)
2021/09/25 MySQL