在角度引导选项卡中绘制的图形

Question

我收到了一个指令，在选项卡中绘制了一个图表。把因为标签不正确地呈现plotly不能设置它的大小正确

<tab ng-click="barChartControl.render()" ng-controller="ContactController as conCtrl"> 
    <tab-heading translate="Header"></tab-heading> 
    <div class="col-sm-12"> 
    <bar-chart mode="'stack'" data="distribution.barValues" labels="distribution.barLabels" theme="'rainbow'" header="'SMS Timeline'" control="barChartControl"> 
    </bar-chart> 
    </div> 
</tab> 

我已经做了2路结合到它的渲染功能虽然 控制=“barChartControl”

这就要求我的渲染函数，当我点击选项卡，但图形不是以正确的大小呈现，因为当ng-click被激发时，选项卡没有被完全加载。如果我在加载选项卡时再次单击选项卡，则图形显示完美。

反正是有调用函数后一个选项卡是在角度引导“装”

Answer 1

我在$超时

HTML

<tab ng-click="renderChart()" ng-controller="ContactController as conCtrl"> 
    <tab-heading translate="Header"></tab-heading> 
    <div class="col-sm-12"> 
    <bar-chart mode="'stack'" data="distribution.barValues" labels="distribution.barLabels" theme="'rainbow'" header="'SMS Timeline'" control="barChartControl"> 
    </bar-chart> 
    </div> 
</tab> 

控制器

包裹我的渲染功能固定它

$scope.barChartControl = {}; 

$scope.renderChart = function() { 
    $timeout(function() { 
    $scope.barChartControl.render(); 
    },0); 
}; 

指令

scope: { 
    control: '=' 
}, 

//Link function 
scope.internalControl = scope.control || {}; 
scope.internalControl.render = render; 

function render(){ 
    //Do stuff 
}