AngularJS - 重新加载 ng 风格的背景图像答案

【问题标题】：AngularJS - Reload ng-style background-imageAngularJS - 重新加载 ng 风格的背景图像
【发布时间】：2017-09-21 15:41:29
【问题描述】：

我需要动态改变 div 的 ng-style 背景？

div：

<div ng-style="{'background-image': 'url({{candidate.image}})'}">
    {{candidate.name}}
</div>

控制器：

angular.module("MyModule")

.controller("MyController", function($scope) {
    $scope.candidate = {
        "image" : "myurl.png",
        "name" : "My Name"
    };

    $scope.changeCandidate = function() {
        $scope.candidate = {
            "image" : "anotherurl.png",
            "name" : "Another Name"
        };
    };
});

当按钮触发changeCandidate()函数时，显示的名称从My Name更改为Another Name，但ng-style的背景图像保持不变

【问题讨论】：

标签： javascript html css angularjs

【解决方案1】：

这是一个工作示例：

https://jsfiddle.net/px3w7w3u/1/

当您使用带有键值对的 ng-style 对象并传递它时。在你的情况下，你应该有这样的东西：

$scope.candidate = {
        "style" : {
            backgroundImage: "url(myurl.png)"
        },
        "name" : "My Name"
    };

$scope.changeCandidate = function() {
    $scope.candidate = {
        "style" : {
           backgroundImage: "url(anotherurl.png)"
         },
        "name" : "Another Name"
    };
};

然后在html中：

<div ng-style="candidate.style">
    {{candidate.name}}
</div>

需要指出的是，如果您需要破折号使用驼峰式大小写 - 与您的情况下的指令和组件相同 backgroundImage 转换为 background-image css：

【讨论】：

嘿pegla，这对我有用。也感谢您的参考！

【解决方案2】：

编写自定义样式：

 $scope.getStyle = function(url){
  return {
    'background-image': "url(" + url + ")",
    'background-position': 'center center'
  }      
}

及用法：

<div ng-style="getStyle(candidate.image)">
    {{candidate.name}}
</div>

Demo Fiddle

【讨论】：

【解决方案3】：

你可以在你的范围内使用ng-if获取背景图片后尝试加载div，如下所示，

<div ng-if="candidate.image" ng-style="{'background-image': 'url({{candidate.image}})'}">
    {{candidate.name}}
</div>

【讨论】：

嗨，伊曼纽尔。即使在我的 div 中使用 ng-if，我仍然得到相同的结果。