angular先加載頁面再執行事件,特別在動態生成id,而後作echarts等圖表

實際上是用到了$timeout,
[javascript] view plain copy print?在CODE上查看代碼片派生到個人代碼片
//首先須要定義一個directive  
  
    directives.directive('onFinishRenderFilters', function ($timeout) {  
        return {  
            restrict: 'A',  
            link: function(scope, element, attr) {  
                if (scope.$last === true) {  
                    $timeout(function() {  
                        scope.$emit('ngRepeatFinished');  
                    });  
                }  
            }  
        };  
    });  
而後在你須要預加載dom的html片斷中使用該directive
[html] view plain copy print?在CODE上查看代碼片派生到個人代碼片
<uib-tabset active="activeJustified" class="mt10"   on-finish-render-filters>  
    <uib-tab ng-repeat="item in pigmanage.generallist" heading="{{item.name}}">  
        <div class="tipcirclebox col-cm-6" ng-repeat = "its in item.tiplist"  on-finish-render-filters>  
             <div id="{{its.id}}" style="width: 500px;height:300px;" ></div>  
        </div>  
    </uib-tab>  
</uib-tabset>  

再結合$scope.$on方法就能夠了
[javascript] view plain copy print?在CODE上查看代碼片派生到個人代碼片
$scope.$on('ngRepeatFinished', function (ngRepeatFinishedEvent) {  
            //下面是在table render完成後執行的js  
            //debugger;  
            var myChart = echarts.init(document.getElementById($scope.pigmanage.generallist[0].tiplist[0].id));  
            console.log(myChart)  
            // 指定圖表的配置項和數據  
            var option = {  
                title : {  
                    text: '某站點用戶訪問來源',  
                    x:'center'  
                },  
                tooltip : {  
                    trigger: 'item',  
                    formatter: ""  
                },  
                series : [  
                    {  
                        name: '訪問來源',  
                        type: 'pie',  
                        radius : '55%',  
                        center: ['50%', '60%'],  
                        data:[  
                            {value:335, name:'直接訪問'},  
                            {value:310, name:'郵件營銷'},  
                            {value:234, name:'聯盟廣告'},  
                            {value:135, name:'視頻廣告'},  
                            {value:1548, name:'搜索引擎'}  
                        ],  
                        itemStyle: {  
                            emphasis: {  
                                shadowBlur: 10,  
                                shadowOffsetX: 0,  
                                shadowColor: 'rgba(0, 0, 0, 0.5)'  
                            }  
                        }  
                    }  
                ]  
            };  
  
            // 使用剛指定的配置項和數據顯示圖表。  
            myChart.setOption(option);  
        });