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

Question

我需要动态改变div的ng风格背景吗？

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的背景图像保持不变

Answer 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：

更多信息：

https://www.w3schools.com/angular/ng_ng-style.asp

Answer 2

写自定义样式：

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

和用法：

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

演示小提琴

Answer 3

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

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