directive多指令之间的异步调用
2019独角兽企业重金招聘Python工程师标准>>>
在 一个angular项目中,directive的使用往往为你项目后期的优化带来了很多方便,
对于directive我想我已经写过很多了,但是有的童鞋就会好奇地来问我,
这个项目我不用directive也可以实现功能啊,好像并没有什么区别啊,那么问题就来了
保时捷也是车,五菱宏光也是车,你会选择哪辆呢?
而一个angular项目中的directive也正是体现了该项目良好性能的一点
那么今天我们就再来深入探讨一下directive中多指令异步渲染的问题,
先来看代码
angualr.module('myApp').directive('firstTag',function(){return {//...}
}).directive('secondTag',function(){return {//...}
}).directive('thirdTag',function(){return {//...}
});
这里有三组标签,相互之间是没有关联的,那么接着看
angualr.module('myApp').directive('firstTag',function(){return {//...}
}).directive('secondTag',function(){return {restrict:'AE',replace:true,link:function(scope,element){angular(element[0]).append('<div></div');}}
}).directive('thirdTag',function(){return {//...}
});
现在我在第二个标签中动态地加入了一个div标签,link顾名思义就是在controller连接HTMLdom的时候,调用的函数,而这个时候angular已经将都没渲染好了,此时我们加上一个div标签 是完全没有问题的,
那么问题又来了,如果我要加入一个third-tag标签呢?
千万千万记住,不能直接加哦!!!!!
因为我之前已经说了,link是在HTMLdom渲染完成之后才会调用的,
所以当second-tag标签进入link方法后,其实页面上的third-tag已经渲染好了,
不要被我写的顺序所迷惑,这三个标签其实是异步并发渲染的,这一个一定要记住哦
而你这个时候再加入third-tag标签的话,他就真的只是一个标签而已......
那么问题来了 ,这个时候我要加入这个third-tag标签应该怎么做呢?
还是看代码
angualr.module('myApp').directive('firstTag',function(){return {//...}
}).directive('secondTag',['$compile',function($compile){return {restrict:'AE',replace:true,link:function(scope,element){$compile(element)(scope);//将element元素重新放回到HTMLdom中进行渲染angular.element(element[0]).append('<third-tag></third-tag>');}}
}]).directive('thirdTag',function(){return {//...}
});
记住一定要使用$compile这个对象,因为它是在link 之前执行的,而我们要将dom进行重新渲染的话,就一定要将该元素重新放回到dom中才可以,
那么有了他,就可以实现directive多标签之间的异步调用了
因为这个点不是很好理解,
所以就这样吧,说多了也不好消化,,,,,,
转载于:https://my.oschina.net/codingBingo/blog/710840
directive多指令之间的异步调用相关推荐
- 同步调用和异步调用两者之间的区别
前言 提到同步调用和异步调用两者的区别,首先笔者是从微服务间通讯方式角度出发来阐述这两者的区别. 同步通讯 调用方需要等待执行方的调用结果.(就像打电话一样,需要实时响应) 典型就是:Dubbo的 ...
- C++多线程:package_task异步调用任何目标执行操作
文章目录 描述 函数成员及使用 总结 我们上一篇描述关于C++多线程中的异步操作相关库( async和 promise),本节将分享c++标准库中最后一个多线程异步操作库 package_task的学 ...
- Spring Boot 中使用@Async实现异步调用,加速任务执行!
欢迎关注方志朋的博客,回复"666"获面试宝典 什么是"异步调用"?"异步调用"对应的是"同步调用",同步调用指程序按照 ...
- xml提示无法连接到远程服务器,异步调用WebService时,如何捕捉“无法连接远程服务器”异常...
在winform窗体中调用webservice,过程如下: ①Form1中弹出Form2 Form2 form2 = new Form2(); form2.ShowDialoag(); ②Form2中 ...
- php 不等待返回的实现方法(异步调用)
PHP异步执行的常用方式常见的有以下几种,可以根据各自优缺点进行选择: 1.客户端页面采用AJAX技术请求服务器 优点:最简单,也最快,就是在返回给客户端的HTML代码中,嵌入AJAX调用,或者,嵌入 ...
- Direct3D Draw函数 异步调用原理解析
概述 在D3D10中,一个基本的渲染流程可分为以下步骤: 清理帧缓存: 执行若干次的绘制: 通过Device API创建所需Buffer: 通过Map/Unmap填充数据到Buffer中: 将Buff ...
- 如何从异步调用返回响应?
我有一个函数foo ,它发出Ajax请求. 如何返回foo的响应? 我尝试从success回调中返回值,以及将响应分配给函数内部的局部变量并返回该局部变量,但这些方法均未真正返回响应. functio ...
- java实现异步调用实例
在JAVA平台,实现异步调用的角色有如下三个角色: 调用者 取货凭证 真实数据 一个调用者在调用耗时操作,不能立即返回数据时,先返回一个取货凭证.然后在过一断时间后凭取货凭证来获取真正的数 ...
- 异步调用可以转化为同步调用吗?
源起 小飞是一名刚入行前端不久的新人,因为进到了某个大公司,俨然成为了学弟学妹眼中'大神',大家遇到js问题都喜欢问他,这不,此时他的qq弹出了这样一条消息 "hi,大神在吗?我有个问题想问 ...
最新文章
- 在新基建风口上,华为“鲲鹏”这次要翱翔了
- 来来来,你可能没见过这么全的实战吧
- input的onkeyup效果 超级简短代码
- 用python批量下载网络图片_python 批量下载网页里的图片
- 有人说学了C语言,两天就能学会Java,两个星期就可以找工作?
- 九张 Gif 图回顾 Web 设计的 25 年历史
- 计算机英语讲课笔记(2020-6-23)
- C#_未在本地计算机上注册“Microsoft.Jet.OLEDB.4.0”提供程序
- Silverlight数据驱动模式探索系列 (1)已知列数的DataGrid绑定
- 用idea创建vue项目
- Cookie中path总结
- 计算机毕业设计Java“小蜜蜂”校园代取快递系统(源码+系统+mysql数据库+lw文档)
- SS-Model【3】:DeepLabv2
- 勒索病毒2019年常见的后缀有ITLOCK/AOL/VC/phobos/ETH/x3m/qwex/H
- es6方法 数组去重 多个数组去重 数组对象去重
- 2005-11-04 03:44 十一月的肖邦byJay
- GTA5内置html菜单源码,GTA5免费内置菜单辅助
- rgb565图像转rgb332
- 【论文笔记:场景】边缘计算中分布式协作的动态卸载模型:森林火灾管理的一个用例
- 互联网发展如此迅速,java凭什么在5G时代站稳脚跟!
热门文章
- VS2012调试ReactOS源码环境搭建4 - 生成ReactOS镜像和VS解决方案成功
- tomcat 内存配置学习总结
- SharpDevelop 5.1 调试一个简单会员管理系统
- 图解cygwin下进行Linux 内核hack失败记
- mvp 在 flutter 中的应用
- Unity发布WebGL时如何修改默认的载入进度条sf?
- MFC连接MySQL C API方法
- GridView不能添加头布局,并且scrollView与GridView冲突导致一些页面无法融合
- 面试题_89_to_92_单元测试 JUnit 面试题
- 数据库系列之数据管理(插入数据)