AngularJS結合+鍍鉻重新繪製錯誤：文本不刷新

（我不能重現的jsfiddle和我不能透露我公司的網站。）AngularJS結合+鍍鉻重新繪製錯誤：文本不刷新

它發生在少數情況下，只有在鉻（正常工作在Firefox）

問題：

綁定文本不顯示，直到頁面重新繪製。

詳情：

我知道這是不是我的代碼中的錯誤，因爲我可以看到別處頁面上的同一個變量綁定工作，並且改變是可見的存在。

例如

<div something-unknown> 
    1. {{ my.var }} <!-- won't redraw --> 
</div> 
... 
test case: 
    2. {{ my.var }}  <!-- works ok -->

更重要的是，

當我導致頁面重繪（不是全部重新加載！），則所顯示的結合是「固定」和正確的值顯示，即

我懷疑這個bug與ajax調用返回的值有關。

我已經看到更多的這個bug，當我有ng-cloak指令，但我刪除了所有這些。

問題是：這是一個已知的錯誤，還是與特定的代碼有關？

就我而言，問題出在ng-show，所以我的答案反映了這一點。

在某些情況下，Chrome將不會在fixed或static定位的元素上執行DOM操作（Chromium）。這不是重繪問題，而是重排，因爲循環CSS動畫並不能阻止它。當堆很小時，似乎不會發生。

鉻盡職盡責地去除標記的.ng-hide類，元素其實是在DOM中可見，但其height和width是0px不管你用你的CSS或JavaScript做什麼。在開發工具計算樣式，你會發現廢話是這樣的：

min-height: 100px;
height: 0px

這裏有兩種方式，我是能夠阻止它：

CSS：使用relative定位包含指令或插值的元素。如果你簡單地將你的元素包裝在具有你想要的position屬性的容器中，它通常不會工作。這增加了佈局限制。
JS/CSS：每當Angular檢索綁定值時，將容器元素或指令的position屬性設置爲absolute。這迫使Chrome重新排列元素。它似乎不適用於absolute以外的其他任何內容。我不知道爲什麼。
```
$scope.getValue = function() { 

    // ... 

    $('.selector').css({position: 'absolute'}); // Assumes jQuery 

    return $scope.someValue; 
}()); 
```

要使用內角的第二個選項，你要插/綁定的功能，而不是一個值（例如，{{ getSomeValue() }}）。在那個函數中，你可以調用上面的代碼。

我會考慮向Chromium團隊提交一個bug。因爲這很奇怪。和惱人的。

2014-09-12 23:22:52

回答