angular先加载页面再执行事件,使用echarts渲染页面
剧情重现:
在一个页面中有多个小模块,这几个模块是可以拖动调顺序的,并且其中有两个模块使用了echarts渲染,
调整顺序angular插件有成熟的解决方案angular-sortable,https://github.com/angular-ui/ui-sortable
1)首先定义一个页面模板数组
$scope.tplList=[
{str:'msgRemind',mark:'msgreMind',tpl:'html的路径'},
{str:'newDeal',mark:'newDeal',tpl:'html的路径'}
........................
];
2)使用ng-repeat配合ng-include动态渲染页面
<ul ui-sortable='' ng-model="tplList" class="list-inline">
<li ng-repeat="item in tplList">
<div ng-include="item.tpl"></div>
</li>
</ul>
如果你这样写,浏览器也确实可以循环出,并编译出你的模块,但是问题是我之前说的是有两个模块是echarts渲染的(使用id做标识),
那么问题就来了,问题就是使用echart的时候,js的执行可能快与页面渲染的速度,你的标识id没能被js找到,
页面渲染与js执行的先后执行问题,
使用过jq的猿类,可能会说$(function(){ ...... })可以解决,我不做任何解释,你去试试把,我看不好使。
那我们在不使用jq的情况下,该怎么来呢??
$emit,$on配合指令监听很不错
直接堆代码了:
//首先需要定义一个directive directives.directive('onFinishRender', function ($timeout) {
return {
restrict: 'A',
link: function(scope, element, attr) {
if (scope.$last === true) { //表明最后一个页面渲染出了
$timeout(function() {
scope.$emit('ngRepeatFinished');
});
}
}
};
});
重新来过
<ul ui-sortable='' ng-model="tplList" class="list-inline" >
<li ng-repeat="item in tplList" on-finish-render>
<div ng-include="item.tpl"></div>
</li>
</ul>
ctrl中进行监听
$scope.$on('ngRepeatFinished',function(){
$scope.setCharts();//执行echarts的绘制函数
$scope.setPatCharts();//执行echas的绘制函数
});
angular先加载页面再执行事件,使用echarts渲染页面的更多相关文章
- ExtJS 等待两个/多个store加载完再执行操作的方法
ExtJS是一种主要用于创建前端用户界面,是一个基本与后台技术无关的前端ajax框架. Extjs加载Store是异步加载的,这有很多好处.但是当我们要在两个或多个不同的store加载完再执行一些操作 ...
- JQuery 页面加载完成后执行事件
一: $(document).ready(function(){ //code }) 二: jQuery(document).ready(function(){ //code }) 三: window ...
- jquery 等html加载完成再绑定事件
$(document).on("click","selector",function(){ //code});
- jquery-事件之页面框架加载后自动执行
jQuery事件之页面框架加载后自动执行 1)概述 HTML执行是按自上而下编译,而<script>一般写在body结束之前.如果在HTML加载的过程中卡住, 比如加载图片等,没有显示出来 ...
- js页面加载完后执行(document.onreadystatechange 和 document.readyState)
js页面加载完后执行javascript(document.onreadystatechange 和 document.readyState) document.onreadystatechange ...
- js中页面加载完成后执行的几种方法及执行顺序
在js和jquery使用中,经常使用到页面加载完成后执行某一方法.通过整理,大概是五种方式(其中有的只是书写方式不一样). 1:使用jQuery的$(function){}; 2:使用jquery的$ ...
- jquery加载页面的方法(页面加载完成就执行)
jquery加载页面的方法(页面加载完成就执行),建议大家看下windows.onload与$(document).ready之间的区别. 1.$(function(){ $("#a&qu ...
- 页面框架加载完自动执行函数$(function(){});
页面中有一些大的资源文件,如图片,声音等,如果一个事件绑定写在这些加载资源代码的下方,那么要等资源加载完才会绑定,这样体验不够好. 于是想不等资源加载完,只要框架加载完成就绑定事件,就可以把代码放在以 ...
- [转]jquery加载页面的方法(页面加载完成就执行)
jquery加载页面的方法(页面加载完成就执行),建议大家看下windows.onload与$(document).ready之间的区别. 1.$(function(){ $("#a&q ...
随机推荐
- 【hive】关于浮点数比较的问题
当在hive中写下浮点数(例如:0.2) hive会把浮点数(0.2)存储为double类型 但是系统中并不能精准表示0.2这个浮点数 正确的浮点数表示 float 0.2 —> 0.200 ...
- 021——VUE中变异方法 push/unshift pop/shift
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- hdu2426
题解: KM模板题 如果n>m,输出-1 如果a[match[i]][i]==-1输出-1 负的边不用考虑 初始都赋值为-1 代码: #include<cstdio> #includ ...
- hdu 6034 Balala Power!
Balala Power! Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others)T ...
- CMDB后台管理(AutoServer)
1.表结构设计 from django.db import models class UserProfile(models.Model): """ 用户信息 " ...
- 逐步实现hash算法(基于BKDRhash函数)
哈希(Hash)算法,即散列函数.它是一种单向密码体制,即它是一个从明文到密文的不可逆的映射,只有加密过程,没有解密过程.同时,哈希函数可以将任意长度的输入经过变化以后得到固定长度的输出.hash算法 ...
- Python中函数装饰器及练习
)]) ,,],)
- Git远程操作详解(转)
转自:http://www.ruanyifeng.com/blog/2014/06/git_remote.html Git远程操作详解 Git是目前最流行的版本管理系统,学会Git几乎成了开发者的 ...
- Vim技能修炼教程(5) - 操作符实务
操作符实务 操作符复习 上次我们讲了操作符与文本对象的组合这样一个vim的强大功能.但是上节的知识点过于密集,可读性可能差了一点.不过没关系,重要的知识点在后面用到的时候我们可以先复习一下. 我们还是 ...
- 服务上部署jmeter远程机
1.首先连接服务器 2.在/home下新创建一个自己的文件夹 ]#useradd zhuxiao ]#ls 显示新的用户并在home下创建zhuxiao文件夹 ①切换到用户zhuxiao目录下 ]#s ...