想把echarts加到angularjs里，照着网上轮了一个，发现只有单个图表的时候一切正常，但当用到for循环生成的div里的时候，由于在调用link函数的时候对应的div还没有生成因此echarts.init会出错。
代码如下：

app.directive("bar", function() {
  return {
    restrict: 'AE',
    scope: {
      'id': '@',
      'height': '@',
      'legend': '=',
      'item': '=',
      'data': '='
    },
    replace: true,
    template: '<div style="height:{[{height}]}px;", id="{[{id}]}"></div>',
    link: function($scope, element, attrs, controller) {
      var option = {
        title: {
            text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
      };
      // 问题在这里：有id但拿不到对应的div。返回的div为null
      var div = document.getElementById($scope.id) 
      // 直接用传进来的element也不对。
      var chart = echarts.init(element)
      chart.setOption(option)
    }
  }
})

这是对应的HTML

<div class="row">
  <div class="col-md-4" ng-repeat="div in universes">
    <div class="panel panel-default" >
      <div class="panel-heading">{[{div.name}]}</div>
      <div class="panel-body">
        <div bar height="250" id="{[{'univ-'+div.id}]}"></div>
      </div>
    </div>
  </div>
</div>

请问应当如何解决？
--
FROM 180.167.67.*