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

Question

我需要动态更改 div 的 ng 样式背景吗？

分区:

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

Controller :

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

Answer 1

这是工作示例:

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

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

$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