• 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的绘制函数
    }
    );
  • 相关阅读:
    Physics Experiment POJ3684
    FLIPTILE POJ NO.3279
    [蓝桥杯][算法提高VIP]盾神与积木游戏
    棋盘问题
    出栈次数的DFS计算
    Bribe the Prisoners
    Crazy Rows
    关于部分“记录”密码获取^o^/
    NOIP2017爆炸记
    【luogu 1024 一元三次方程求解】二分思想
  • 原文地址:https://www.cnblogs.com/evaling/p/7327327.html
Copyright © 2020-2023  润新知