Добавление CSS после создания элементов

Question

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

data-ng-click="opeTab($event); getObjects($event); loadObj($event); setIcons();"

Проблема в том, что я могу получить элементы с помощью:

    $scope.setIcons = function(){

    var tbs = document.getElementsByClassName("tabTr");

    for(let i = 0; i < tbs.length; i++){
        console.log(i);
        tbs[i].style.backgroundImage = "url('../ICONS\Icons_24\'" + tbs[i].id + "')";
        }
    }

Исписок в консоли заполнен, но длина массива равна 0. Итак, какая у меня есть возможность «ждать» создания, кроме установки таймаута?

Answer 1

Вы должны стараться избегать создания элементов самостоятельно из ваших контроллеров.Возможно, у вас есть веская причина для этого, но я не вижу этого из приведенного вами примера.

Где-то в вашем шаблоне у вас должен быть ng-repeat, который отображает ваши вкладки.Каждая вкладка должна иметь стиль ng .Скажем:

// template.html
<div class="tabs" ng-repeat="tab in tabs">
    <div
        class="tab"
        ng-style="getBackgroundImageStyle(tab.id)">
        tab {{ tab.id }}
    </div>
</div>

// controller.js
$scope.tabs = [];

$scope.getBackgroundImageStyle = tabId => `{
    'background-image': 'url('../ICONS/Icons_24/${tabId}')'
}`

$scope.openTab = () => {
    $scope.tabs.push(new Tab(nextTabId)); // or however you create your tabs
}

Если у вас есть веская причина для прямого доступа к DOM, как это, то нет проблем с использованием $ timeout с задержкой 0 и переносом вашей модификации DOMвнутри этого.Все должно быть обработано до запуска кода внутри $ timeout.