使用Angularjs更改类中的背景图像答案

【问题标题】：Change background Image in a Class using Angularjs使用Angularjs更改类中的背景图像
【发布时间】：2023-04-10 14:42:08
【问题描述】：

我有一个名为 "tp-cont" 的类，它是从不同的 .css 文件加载的。我可以使用下面的代码使用 jQuery 更改背景图像。

在 HTML 中：

<li ng-click="changeTemplateBackgroundImage()"></li>

在控制器中：

$scope.changeTemplateBackgroundImage = function(){

        var imageUrl = 'public/uploads/Admin/template_themes/1/black.png';
        $('.tp-cont').css('background-image','url(' + imageUrl + ')');

    };

我想知道是否有使用 angularjs

的解决方法

先谢谢了。

答案如下：

在控制器中：

$scope.changeTemplateBackgroundImage = function(){

        $scope.bgUrl = 'public/uploads/Admin/template_themes/1/black.png';

    };

在 HTML 中：

<div class="tp-cont" ng-style="{ 'background-image': 'url({{bgUrl}})' }">

【问题讨论】：

看这个：你可以为它创建一个自定义指令。 stackoverflow.com/questions/13781685/…
为什么要走远？ ng-class呢？
您有权访问此 .css 文件吗？能改吗？
我的意思是 - 你可以将 clsses 添加到 css 文件本身吗？直接给它加代码行？

标签： html angularjs

【解决方案1】：

在控制器中：

$scope.changeTemplateBackgroundImage = function(){

        $scope.bgUrl = 'public/uploads/Admin/template_themes/1/black.png';

    };

在 HTML 中：

<div class="tp-cont" ng-style="{ 'background-image': 'url({{bgUrl}})' }">

【讨论】：

【解决方案2】：

是的，您可以创建一个指令并使用 $element

https://docs.angularjs.org/api/ng/function/angular.element

您也可以直接在控制器中执行此操作。也可以将 vanile js 与 document.getElementById 一起使用

【讨论】：

【解决方案3】：

$scope.changeTemplateBackgroundImage = function(){

        var imageUrl = 'public/uploads/Admin/template_themes/1/black.png';
        var element = document.getElementByClassName("tp-cont");
        element.style.backgroundImage = 'url('+imageUrl')';

    };

【讨论】：

【解决方案4】：

你可以使用ng-style，点赞

<span ng-style="myStyle">Sample Text</span>，在你的函数中设置myStyle字符串。

【讨论】：