• 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的绘制函数
    }
    );
  • 相关阅读:
    【JQuery】JQuery属性
    C语言封装的环形队列
    C语言封装的栈结构
    再谈C语言宏定义
    url编码与解码(C语言)
    鼠标钩子安装,实现获取鼠标的全局点击位置
    分享一个MFC的内存DC封装类
    MDK5.30中出现警告 xxx.c(x): warning: no previous extern declaration for non-static variable 'in' [-Wmissing-variable-declarations]
    MFC中加载位图
    分享一个自己封装的WIN SOCKET类
  • 原文地址:https://www.cnblogs.com/evaling/p/7327327.html
Copyright © 2020-2023  润新知