Question

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

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

Answer 1

以下是工作示例：

https://github.com/reimagined/resolve/tree/master/packages/resolve-scripts

当您使用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://jsfiddle.net/px3w7w3u/1/

Answer 2

编写自定义样式：

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

和用法：

branches

Demo Fiddle

Answer 3

您可以尝试使用 ng-if 在示波器中获取背景图片后加载div，如下所示，

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

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

3 个答案: