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的繪制函數
});