Как получить элемент после отображения / инициализации?

Question

Есть классы droppable и droppable.shut, которые отвечают за отображение новости:

<div id="{{news.newsId+'expandItem'}}" class="droppable">
    <small ng-bind-html="getComment2(news.news)"></small>
</div>

Внутри функции происходит проверка на достаточный объем и если он больше нужного, то к классу droppable прибавляется .shut и меняются стили (добавляется возможность скрытия и пр.):

angular.forEach($scope.companyNews, function (newsExtended) {
...
    if(numOfRows > 6 || numOfRowsInReport > 6){
                        newsExtended.isToExpand = true;
                        $timeout(function() {
                            $('#' + newsExtended.newsId + 'expandItem').addClass("shut");
                        }, 100);
                    }
...
}

Проблема в том, что без таймаута такая логика не работает, т.к. элементы не успевают инициализироваться, а решение с таймаутом костыльное и бросается в глаза, если смотреть на конкретно блок с текстом во время загрузки страницы.

Предполагаю, что можно получить элементы после инициализации посредством jQuery или каким-нибудь другим способом, но не знаю как.

Answer 1

Просто вычислите необходимые параметры, запишите в "новость" и примените в ngClass

angular.forEach($scope.companyNews, (newsExtended) => {

  newsExtended.numOfRows = ...; // 7
  newsExtended.numOfRowsInReport = ...; // 7
  newsExtended.isToExpand = ...; // true

});

<div
  id="{{news.newsId+'expandItem'}}"
  class="droppable"
  ng-class="{'shut': (news.numOfRows > 6 || news.numOfRowsInReport > 6 || news.isToExpand)}"
>
  <small ng-bind-html="getComment2(news.news)"></small>
</div>

_{И вот так ng-bind-html="getComment2(news.news)" не надо делать. Даже в старом добром angularjs есть компоненты (или директивы, на худой конец), так что лучше вынести в компонент, поставить логику в контроллер, шаблон в шаблон...}

БЛОГ НА HUSL

Как получить элемент после отображения / инициализации?

Ответы (1 шт):