высота div равна нулю внутри $ (document) .ready ()

Question

Насколько мне известно, если мы напишем код JQuery code внутри $ (document) .ready (), тогда код будет выполнен после полной визуализации DOM.

Я пытаюсь вычислить высоту div внутри $ (document) .ready (), но возвращает нулевую высоту. Но когда я запускаю тот же код в консоли браузера, он возвращает правильную высоту.

Контент загружается через Angularjs.

JQuery:

$(document).ready(function (){
 // hide view more button if user bio content is less than 200 words
    var userBioLength = $('.userBioText > p').html().split(" ").length;
       if( userBioLength<=200){
       $('.userBioOverly').addClass("hide")
       $('.viewMore').addClass("hide")


    var textHeight = $(".userBioText").height();
    console.log(textHeight);  // return 0
    $('.userBioWrapper').css({height:textHeight + 10+'px'});
}

HTML:

 <div class="userBioWrapper">
       <div class="userBioText">
            <p>
               {{userInfo.bio}} 
               Lorem ipsum dolor sit amet consectetur adipisicing elit. Id fugiat praesentium molestias aliquam quam cupiditate officiis eligendi dolor repellendus, recusandae voluptatem. Iste aliquam itaque rem tempore officia perspiciatis natus molestiae.
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Id fugiat praesentium molestias aliquam quam cupiditate officiis eligendi dolor repellendus, recusandae voluptatem. Iste aliquam itaque rem tempore officia perspiciatis natus molestiae.
              </p>
       </div>
      <div class="userBioOverly"></div>
 </div>

Мне любопытно, почему это поведение отличается. Я что-то не так делаю?

Answer 1

Нет.

Не полностью отрендерено, но событие ready документа, что означает, что он загрузил все с сервера, включая необработанные html.

Angular js фактически начинается после завершения jquery ready ...

Если вы хотите, чтобы что-то было сделано после выполнения ng, вам нужно установить таймаут в ваших контроллерах или директивах, и обычно, если есть ng-for, он будет работать даже при ожидании 0 мс

РЕДАКТИРОВАТЬ: больше решений здесь (лучше, чем у меня ..)

Answer 2

Это сработало для меня, установив высоту Div, используя класс css. В классе css я устанавливаю высоту: авто;.

css:

.unsetHeight { 
    height: auto;
 }

Jquery:

 var userBioLength = $('.userBioText > p').html().split(" ").length;
    if( userBioLength<=200){
        $('.userBioOverly').addClass("hide")
        $('.viewMore').addClass("hide")

        $('.userBioWrapper').addClass("unsetHeight");
 }