Question

您好我有以下代码来设置整个页面的背景，并且它可以正常显示背景图像，但Chrome控制台显示此错误

GET http://localhost:3000/assets/img/backgrounds/%7B%7Bbgimg%7D%7D 404 (Not Found)
GET http://localhost:3000/assets/img/backgrounds/ 404 (Not Found)

使用src而不是ng-src加载图片时此错误类似，但对于背景我不知道任何指令。这是我的代码

HTML：

<body background="assets/img/backgrounds/{{bgimg}}">
<div class="view-container layer">
    <div ng-view></div>
</div>

控制器

    var bgImagesList = ['01.jpg',
        '02.jpg', '03.jpg', '04.jpg',
        '05.jpg', '06.jpg', '07.jpg',
        '08.jpg', '09.jpg', '10.jpg',
        '11.jpg'];

    var changeBaclground = function () {
        $rootScope.bgimg = bgImagesList[Math.floor(Math.random() * bgImagesList.length)];
    };

Answer 1

您可以将ng-style用于此目的

<body ng-style="{'background-image':'url(assets/img/backgrounds/{{bgimg}})'}" >

其他简单方法将是 HTML：

<body ng-style="setBackground()" >

在控制器中：

var bgimg = bgImagesList[Math.floor(Math.random() * bgImagesList.length)];   

$rootScope.setBackground = function(){
    return {
            'background-image':'url(assets/img/backgrounds/' + bgimg + ')'
        }
}

Answer 2

我可能会考虑使用ng-style作为解决方案。

更改背景时在控制器内部，更新$scope中由ng-style元素引用的样式对象。

查看有关ng-style here的一些信息。

<强>更新

请参阅以下plunkr http://plnkr.co/edit/dYIQ...，其中显示了ng-style的简单用法。选中并取消选中该复选框后，背景颜色将在红色和蓝色之间变化。

对于您的问题，您的myStyle对象可能类似于

var myStyle = {
  background: 'url(path/to/' + bgimg + ')'
}

理想情况下，您不需要每次都创建myStyle变量，但该示例为您提供了如何使用它的简单示例。

希望能帮到你！

Answer 3

对您的元素使用ng-style，这是如何设置它：

ng-style="{'background-image':'url(assets/img/backgrounds/{{bgimg}})'}"

这就是你的整个代码应该如何：

<body ng-style="{'background-image':'url(assets/img/backgrounds/{{bgimg}})'}">
<div class="view-container layer">
    <div ng-view></div>
</div>

您可以在 ngStyle - directive in module ng 了解更多相关信息，然后您会发现如何使用它here。

使用AngularJs Controller动态设置背景图像

3 个答案: