时间戳

首页 > 解决方案 > 创建元素后添加css

javascript - 创建元素后添加css

问题描述

我想在创建它们后直接向使用 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。那么除了设置超时之外，我还有什么可能“等待”创建？

标签： javascriptangularjs

解决方案

您应该尽量避免自己从控制器中创建元素。也许您有充分的理由这样做，但是从您给出的示例中我看不到这一点。

在您的模板中的某处，您应该有一个 ng-repeat 来呈现您的选项卡。每个选项卡都应该有一个ng-style。让我们说：

// 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，那么使用延迟为 0 的$timeout并将您的 dom 修改包装在其中没有问题。一切都应该在 $timeout 中的代码运行之前渲染。

推荐阅读