标签：blog logs item 定义 数组 方案 turn scope span
剧情重现：
在一个页面中有多个小模块，这几个模块是可以拖动调顺序的，并且其中有两个模块使用了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渲染页面
标签：blog logs item 定义 数组 方案 turn scope span
原文地址：http://www.cnblogs.com/evaling/p/7327327.html
