javascript - Dynamically seting a background image using AngularJs Controller

Hi I have the following code to set the background to the whole page, and it works fine the background image is showed as expected, but the chrome console show this errors

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

This error is similar when loading image with src instead of ng-src but for background I don't know any directive. here is my code

HTML:

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

The controller

    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)];
    };

Hi I have the following code to set the background to the whole page, and it works fine the background image is showed as expected, but the chrome console show this errors

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

This error is similar when loading image with src instead of ng-src but for background I don't know any directive. here is my code

HTML:

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

The controller

    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)];
    };

Share Improve this question asked Sep 4, 2015 at 14:43 efirvida 4,8755 gold badges49 silver badges76 bronze badges

1 You could consider using ng-class or ng-style I believe. – Jhey Commented Sep 4, 2015 at 14:48

Add a ment |

3 Answers 3

Sorted by: Reset to default 5

You can use ng-style for this purpose

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

Other easy way will be
html:

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

In Controller:

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

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

I'd possibly consider using ng-style for a solution.

Inside your controller when you change the background, update a style object in your $scope which is reference by ng-style of the element.

See some info about ng-style here.

UPDATE

See the following plunkr http://plnkr.co/edit/dYIQ... that shows a simple use of ng-style. When you check and uncheck the checkbox the background color will change between red and blue.

For your problem, your myStyle object could be something like;

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

Ideally, you won't need to create the myStyle variable each time but the example gives you a simple example of how it can be used.

Hope that helps you out!

Use ng-style with your element, this is how to set it:

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

And this is how your whole code should be:

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

You can read more about it at ngStyle - directive in module ng and you will find how to use it here.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Dynamically seting a background image using AngularJs Controller - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)