ng-repeat에서 글꼴 크기의 크기를 자동으로 조정합니다.

Question

현재 글꼴 크기를 고정 크기 div에 맞게 조정하려고합니다. 나는, 자바 스크립트 코드의이 흥미로운 작품은 서로 다른 사업부가 NG 반복 표현의 내부에 있기 때문에,

<div ng-repeat="defect in surface.defects" class="new-page"> 
      <div id="defect-text"> 
            <div> 
             <div id="defect-title">{{ 'TYPE' | translate }}:</div> 
             {{ defect.type }} 
             <div id="defect-title">Emplacement du défaut:</div> 
             {{ defect.location }} 
             <div id="defect-title">Dimension du défaut:</div> 
             {{ defect.dimension }} 
             <div id="defect-title">Actions suggérées:</div> 
             {{ defect.future_operation }} 
             <div id="defect-title">Détail technique du défaut:</div> 
             {{ defect.description }}</div> 
           </div></div> 

그러나 다음과 같은 HTML 코드에 대해 잘

 $('#defect-text div').css('font-size', '1em'); 

      while ($('#defect-text div').height() > $('#defect-text').height()) { 
       $('#defect-text div').css('font-size', (parseInt($('#defect-text div').css('font-size')) - 1) + "px"); 
      } 

일을하고 자바 스크립트의 나의 조각을 발견 코드는 모든 컨테이너의 글꼴 크기를 원하는 크기로 변경합니다. ng-repeat의 현재 요소를 선택하고 컨테이너에 맞게 자신의 CSS 만 변경하는 코드로 변경하는 방법이 있습니까? 당신은 (아무리 깊은)이 id="defect-text" 요소의 모든 <div> 후손을 선택하지 않고이 그들을 수정하고

$('#defect-text div').css('font-size'...) 

: 사전에

덕분에

Answer 1

나는 문제가 실제로 범위 중 하나라고 생각합니다 시각. 기술적으로 ID 은 반드시이어야합니다 (동일한 ID를 가진 요소가 여러 개있는 경우 동작이 잘 정의되어 있지 않음). 선택자가 요소에 포함 된 <div> 요소를 모두 잡아 내고 있다고 생각합니다. 이는 아마도 사용자보다 훨씬 광범위합니다. 이 특정 루프 안에 있습니다.

나는 당신의 NG 반복 블록을 수정 한 후 고유 한 결함의 모든 <div> 자손을 얻기 위해 $("#"+defect.id + " div")을 사용할 수 있습니다

<div id="{{ defect.id }}"> 

같은 각도 표현 언어를 사용하여 ID를 교체하는 것이 좋습니다.

모든 자손 대신 하위 선택 자 "> div"을 사용하는 것도 고려해 볼 수 있습니다.