Автоматическое изменение размера шрифта в ng-repeat

Question

В настоящее время я пытаюсь изменить размер шрифта, чтобы он соответствовал размеру div с фиксированным размером. Я нашел этот интересный кусок яваскрипта коды делает работу очень хорошо

 $('#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"); 
      } 

Для следующего HTML-кода

<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> 

Однако, поскольку разные DIV внутри выражения нг-повтора, мой кусок JavaScript код изменяет размер шрифта каждого контейнера с желаемым размером первого. Есть ли способ изменить код, чтобы выбрать текущий элемент ng-repeat и изменить только собственный CSS, чтобы он соответствовал контейнеру?

заранее спасибо

Answer 1

Я думаю, ваша проблема на самом деле одна из сферы:

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

Вы не будете выбирать ВСЕ <div> потомков (независимо от того, насколько глубоко) в id="defect-text" элемента и изменение их в этом время. Технически ID ДОЛЖЕН быть уникальным (поведение не определено, если у вас несколько элементов с одинаковым ID), и я думаю, что ваш селектор захватывает ВСЕ <div>, содержащиеся в ЛЮБОЙ #defect-text элементах, что, вероятно, намного шире, чем вы хотите, внутри этого конкретного цикла.

Я бы рекомендовал модифицируя нг-повтор блок и замены ID, используя угловой язык выражений, как

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

, то вы можете использовать $("#"+defect.id + " div"), чтобы получить все <div> потомков уникального дефекта.

Я также хотел бы использовать дочерний селектор "> div" вместо всех потомков.