angular先加載頁面在執行事件,使用echarts渲染頁面
阿新 • • 發佈:2017-08-09
clas pre on() cti == https str log ret
劇情重現:
在一個頁面中有多個小模塊,這幾個模塊是可以拖動調順序的,並且其中有兩個模塊使用了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渲染頁面