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); });
全部教程http://each.sinaapp.com/angular/index.html