(我无法在jsfiddle中复制,我无法透露我公司的网站.)
它发生在少数情况下,只在chrome中(在firefox上运行正常)
问题：
细节：
我知道这不是我的代码中的错误,因为我可以看到相同的变量绑定在页面的其他地方工作,并且更改在那里可见.
例如
<div something-unknown>
1. {{ my.var }} <!-- won't redraw -->
</div>
...
test case:
2. {{ my.var }} <!-- works ok -->
更重要的是,
当我导致页面重绘(不是完全重新加载！)时,显示的绑定是“固定的”并显示正确的值,即
>用鼠标选择文字,
>或通过调整窗口大小,
>或滚动,
我怀疑这个bug与从ajax调用返回的值有关.
当我有ng-cloak指令时,我已经看到了更多这个bug,但我删除了所有这些.
解决方法
就我而言,问题出在ng-show上,所以我的回答反映了这一点.
在某些情况下,Chrome不会对固定或静态定位元素执行DOM操作(Chromium).这不是重绘的问题,但是使用重排,因为循环CSS动画并不会阻止它.当堆很小时似乎没有发生.
Chrome尽可能地从标记中删除.ng-hide类,并且该元素实际上在DOM中可见,但无论您使用CSS或javascript做什么,它的高度和宽度都是0px.在Dev Tools中的计算样式中,你会发现这样的废话：
min-height: 100px;height: 0px
以下是我能够阻止它的两种方法：
> CSS：对包含指令或插值的元素使用相对定位.如果只是将元素包装在具有所需位置属性的容器中,它通常不起作用.这带来了严重的布局限制.
> JS / CSS：每次Angular检索绑定值时,将容器元素或指令的position属性设置为绝对值.这会迫使Chrome重排元素.它似乎不适用于绝对以外的任何东西.我不知道为什么.
$scope.getValue = function () {
// ...
$('.selector').css({position: 'absolute'}); // Assumes jQuery
return $scope.someValue;
}());
要在Angular中使用第二个选项,您需要插入/绑定函数而不是值(例如,{{getSomeValue()}}).在该函数中,您可以调用上面的代码.
我将考虑向Chromium团队提交一个错误.因为这很奇怪.而且很烦人.
