UI Bootstrap與Flot造成錯位滴答聲

Question

我正在使用UI Bootstrap處理Angular web應用程序，並且遇到了使用UI選項卡在flot圖表中遇到y-tick標籤對齊問題。

使用標準引導標籤，該地塊內匹配和標籤集外： http://jsfiddle.net/TDwGF/614/

然而，UI引導的tabset，我們發現，在Y刻度標記的情節重疊： http://jsfiddle.net/TDwGF/615/

在製作flot指令時使用不同的方法，我可以創建一個只有一半的y-tick標籤未對齊的情節（然而，我無法在最小的例子中重現這一點）。

我找不到任何繼承CSS的修改會導致這些問題，我也沒有在通過標籤指令的源代碼會遇到任何運氣。

任何幫助，將不勝感激。

Answer 1

我記得在處理Highcharts時，我已經發生了類似的事情。

錯位的根本原因可能是限制canvas/svg容器空間的瀏覽器動態呈現時間。

---

要解決這種問題，只是包裝的情節創作了超時，以使其在未來消化週期：

App.directive('chart', function() { 
    return { 
     restrict: 'A', 
     link: function(scope, elem, attrs) { 
      var data = scope[attrs.ngModel]; 
      setTimeout(function(){ 
       $.plot(elem, data, {}); 
       scope.$apply(); 
      }, 0); 
     } 
    }; 
}); 

See working setTimeout fiddle here.

---

Anternatively你可以注入角$timeout，因此它已經爲您撥打scope.$apply()：

App.directive('chart', ['$timeout', function($timeout) { 
    return { 
     restrict: 'A', 
     link: function(scope, elem, attrs) { 
      var data = scope[attrs.ngModel]; 
      $timeout(function() { 
       $.plot(elem, data, {}); 
      }, 0); 
     } 
    }; 
}]); 

See working $timeout fiddle here.