AngularJS - ng-style 不更新 css 背景属性

Posted 2023-02-19

【中文标题】AngularJS - ng-style 不更新 css 背景属性

【英文标题】：AngularJS - ng-style does not update css background property

【发布时间】：2014-06-13 00:33:07

【问题描述】：

我有一个返回图像 URL 的服务，它使用以下代码调用：

angular.forEach(results, function (item) 
     item.img = "/images/searchItem.jpg";
     $http.post("https://my.api.com/?id=" + item.id).success(
           function (url) 
               item.img = url;
           );
);

在我看来，我曾经有一张带有 ng-src 属性的图像，效果非常好：

<img  ng-src="item.img">

然后我决定在 SPAN 上使用背景图像：

<span ng-style="'background':'transparent url(item.img)'"></span>

现在该流程仅在第一次运行时有效，之后我可以（在控制台中）看到以下 html

<span ng-style="'background':'transparent url(http://expertsimages.liveperson.com/images/rating/rate10.gif)'" style="background-image: url(https://fb.lp-chat.com/images/searchItem.jpg); background-color: transparent; background-position: initial initial; background-repeat: initial initial;"></span>

表示变量已更新，但 html 仍处于初始状态。

我尝试在发布成功时调用 apply/digest，但收到一个错误 $digest already in progress（这是有道理的）。奇怪的是，在正常的摘要之后（例如在其他 ui 更改上），样式被应用并且我看到了正确的图像。

我在这里错过了什么？

更新： 我创建了一个 JS fiddle 来演示这个问题......对我来说看起来像是一个有角度的错误。

【参考方案1】：

我也遇到过这个。不要使用 进行评估，而是使用字符串 + 值连接。

这将起作用：

<span ng-style="'background':'transparent url(' + item.img + ')'"></span>)

这是您的fiddle 的工作版本

【讨论】：

我认为这是正常的关于观察者在这种情况下没有应用深度观察。

example : backgroundColor 即使值改变了也一样，但是如果你添加 color 属性，它会被应用，因为在第一层添加了一个新属性。

为我节省了数小时的调试时间

【参考方案2】：

它不起作用，因为 angular 只对单个括号的内容进行一次评估，并且没有找到要在该字符串中绑定的变量。

但是，您可以像这样创建自己的指令：

app.directive('backImg', function()
    return function(scope, element, attrs)
        attrs.$observe('backImg', function(value) 
            element.css(
                'background': 'transparent url(' + value +')'
            );
        );
    ;
);

然后像这样在你的模板中使用它：

<div ng-if="vis" class="container" back-img="imgSrc"></div>

我已经更新了你的小提琴，它似乎工作正常http://jsfiddle.net/dS4pB/3/

【参考方案3】：

如果您当前正在更新您的范围变量，请将其包装在 $timeout 调用中以将更新推送到您的范围和随后您的视图，这将有效地将更新推送到下一个 digest 避免 摘要已经在进行中冲突：

    $timeout(function()
        $scope.var = value;
    );

This question thread 可能会给你一些关于apply 与timeout 等的有用信息

【讨论】：

谢谢回复，我去看看

我尝试了超时，但它并没有解决问题......我什至尝试了 10 秒的延迟，然后检查了元素。 10 秒后，ng-style 属性更新，但视图保持不变。有什么新想法吗？

这非常有效。由于超时的工作方式，您实际上甚至根本不需要任何时间延迟。谢谢！

谢谢，我的脸颊上流下了喜悦的泪水。

【参考方案4】：

您可能面临我最近遇到的相同问题并使用 ng-bind 解决了。

检查这个问题中解释的答案：

AngularJS : Why ng-bind is better than in angular?

使用 ng-bind 后，我的 innerhtml 已正确更新。

【参考方案5】：

Angular 2 有一个很好的方法，[style.*]="value"

<span [style.background-color]="transparent" [style.background-image]="item.img"></span>

【讨论】：

@RPDeshaies 也许，但随着 Angular 2 获得更多追随者，对于在新框架上寻找这些答案的人们来说，这个问题仍然可能是谷歌搜索结果

@S.Buda 不，因为 Angular 2+ 没有 ng-style 我在这里是为了 legacyjs