剧情重现:

在一个页面中有多个小模块,这几个模块是可以拖动调顺序的,并且其中有两个模块使用了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渲染页面的更多相关文章

  1. ExtJS 等待两个/多个store加载完再执行操作的方法

    ExtJS是一种主要用于创建前端用户界面,是一个基本与后台技术无关的前端ajax框架. Extjs加载Store是异步加载的,这有很多好处.但是当我们要在两个或多个不同的store加载完再执行一些操作 ...

  2. JQuery 页面加载完成后执行事件

    一: $(document).ready(function(){ //code }) 二: jQuery(document).ready(function(){ //code }) 三: window ...

  3. jquery 等html加载完成再绑定事件

    $(document).on("click","selector",function(){ //code});

  4. jquery-事件之页面框架加载后自动执行

    jQuery事件之页面框架加载后自动执行 1)概述 HTML执行是按自上而下编译,而<script>一般写在body结束之前.如果在HTML加载的过程中卡住, 比如加载图片等,没有显示出来 ...

  5. js页面加载完后执行(document.onreadystatechange 和 document.readyState)

    js页面加载完后执行javascript(document.onreadystatechange 和 document.readyState) document.onreadystatechange ...

  6. js中页面加载完成后执行的几种方法及执行顺序

    在js和jquery使用中,经常使用到页面加载完成后执行某一方法.通过整理,大概是五种方式(其中有的只是书写方式不一样). 1:使用jQuery的$(function){}; 2:使用jquery的$ ...

  7. jquery加载页面的方法(页面加载完成就执行)

    jquery加载页面的方法(页面加载完成就执行),建议大家看下windows.onload与$(document).ready之间的区别. 1.$(function(){  $("#a&qu ...

  8. 页面框架加载完自动执行函数$(function(){});

    页面中有一些大的资源文件,如图片,声音等,如果一个事件绑定写在这些加载资源代码的下方,那么要等资源加载完才会绑定,这样体验不够好. 于是想不等资源加载完,只要框架加载完成就绑定事件,就可以把代码放在以 ...

  9. [转]jquery加载页面的方法(页面加载完成就执行)

    jquery加载页面的方法(页面加载完成就执行),建议大家看下windows.onload与$(document).ready之间的区别.   1.$(function(){ $("#a&q ...

随机推荐

  1. 【hive】关于浮点数比较的问题

    当在hive中写下浮点数(例如:0.2) hive会把浮点数(0.2)存储为double类型 但是系统中并不能精准表示0.2这个浮点数 正确的浮点数表示 float   0.2 —> 0.200 ...

  2. 021——VUE中变异方法 push/unshift pop/shift

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. hdu2426

    题解: KM模板题 如果n>m,输出-1 如果a[match[i]][i]==-1输出-1 负的边不用考虑 初始都赋值为-1 代码: #include<cstdio> #includ ...

  4. hdu 6034 Balala Power!

    Balala Power! Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others)T ...

  5. CMDB后台管理(AutoServer)

    1.表结构设计 from django.db import models class UserProfile(models.Model): """ 用户信息 " ...

  6. 逐步实现hash算法(基于BKDRhash函数)

    哈希(Hash)算法,即散列函数.它是一种单向密码体制,即它是一个从明文到密文的不可逆的映射,只有加密过程,没有解密过程.同时,哈希函数可以将任意长度的输入经过变化以后得到固定长度的输出.hash算法 ...

  7. Python中函数装饰器及练习

    )])   ,,],)

  8. Git远程操作详解(转)

    转自:http://www.ruanyifeng.com/blog/2014/06/git_remote.html Git远程操作详解   Git是目前最流行的版本管理系统,学会Git几乎成了开发者的 ...

  9. Vim技能修炼教程(5) - 操作符实务

    操作符实务 操作符复习 上次我们讲了操作符与文本对象的组合这样一个vim的强大功能.但是上节的知识点过于密集,可读性可能差了一点.不过没关系,重要的知识点在后面用到的时候我们可以先复习一下. 我们还是 ...

  10. 服务上部署jmeter远程机

    1.首先连接服务器 2.在/home下新创建一个自己的文件夹 ]#useradd zhuxiao ]#ls 显示新的用户并在home下创建zhuxiao文件夹 ①切换到用户zhuxiao目录下 ]#s ...