首页 > 代码库 > angular先加载页面在执行事件，使用echarts渲染页面

angular先加载页面在执行事件，使用echarts渲染页面

2024-11-23 00:49:02   204人阅读

剧情重现：

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


联系
我们