AngularJS와 : 텍스트가 새로 고쳐지지 않습니다

Question

(내가 jsfiddle에서 재현 할 수없는 그리고 난 내 회사의 웹 사이트를 공개 할 수 없습니다.)

그것은 몇 가지 상황에서 발생, 단지 크롬 (

바인더 제본 텍스트는 페이지가 을 다시 그려 질 때까지 표시되지 않습니다

문제) 파이어 폭스에서 잘 작동합니다.

세부 사항 :

내가 같은 변수 바인딩 작품의 다른 페이지, 그리고 변화가 볼 수 있음을 알 수 있기 때문에, 내 코드에 버그가 아니라고 알고 있습니다.

더 중요한 것은

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

,

내가 페이지를 다시 그리기 원인 (안 전체 다시로드를!)

다음은 바인딩 "고정"되어 표시되고 올바른 값 즉,

표시됩니다 마우스로 텍스트를 선택하여
• ,
• 하거나 창 크기를 조정하여
,
• 또는 스크롤,

이 버그는 ajax 호출에서 반환되는 값과 관련이있는 것 같습니다.

ng-cloak 지시문을 사용하면이 버그를 더 많이 봤지만 모두 제거했습니다.

질문 : 이 알려진 버그입니까? 아니면 특정 코드와 관련이 있습니까?

Answer 1

제 경우에는 문제가 ng-show으로되어 있었기 때문에 이에 대한 대답이 반영되었습니다.

Chrome은 fixed 또는 static 위치 요소에서 DOM 조작 (Chromium too)을 실행하지 않는 경우가 있습니다. 다시 그리는 데 문제가 없지만 리플 로우는 CSS 애니메이션을 반복해도 문제가되지 않으므로 리플 로우가 적용됩니다. 힙이 작을 때 발생하는 것 같지 않습니다.

크롬은 충실하게 마크 업에서 .ng-hide 클래스를 제거하고 요소 는 DOM에 보이는 사실이지만, 그 height 및 width 상관없이 당신이 당신의 CSS 나 자바 스크립트로 무엇을 0px을하지 않습니다.개발 도구의 스타일을 계산에서는이 같은 넌센스를 확인할 수있는 것들 :

min-height: 100px;
height: 0px

을 여기에 내가 그것을 방지 할 수 있었다 두 가지 방법 :

1. 가 CSS : 지시문 또는 보간 값이 포함 된 요소에 relative 위치 지정을 사용하십시오. 원하는 position 속성이있는 컨테이너에서 요소를 간단하게 래핑하면 일반적으로 작동하지 않습니다. 이는 레이아웃 제한이 심합니다.

2. JS/CSS : 컨테이너 요소 또는 지시문의 position 속성을 absolute으로 설정할 때마다 Angular가 바인딩 된 값을 검색합니다. 이렇게하면 Chrome이 요소를 리플 로우합니다. absolute 이외의 것으로는 작동하지 않습니다. 나는 이유를 모른다.

$scope.getValue = function() { 

    // ... 

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

    return $scope.someValue; 
}()); 

이 각도 내에서 두 번째 옵션을 사용하려면/보간 함수가 아닌 값을 바인딩 할 수 있습니다 ( 예를 들어, {{ getSomeValue() }}). 이 함수 내에서 위 코드를 호출 할 수 있습니다.

Chromium 팀에 버그를 신고 할 것입니다. 이것은 이상한 것이기 때문에. 그리고 짜증나.