剧情重现:
在一个页面中有多个小模块,这几个模块是可以拖动调顺序的,并且其中有两个模块使用了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的绘制函数
});