動態塞汀使用AngularJs控制器背景圖像

您好我有下面的代碼將背景設置爲整個頁面，並能正常工作如預期的背景圖像顯示，但鉻控制檯上顯示這個錯誤動態塞汀使用AngularJs控制器背景圖像

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

來源

2015-09-04 efirvida

我相信你可以考慮使用'ng-class'或'ng-style'。 – jh3y

可以使用NG-樣式爲此

<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 + ')' 
     } 
}

來源

2015-09-04 14:49:44

我試過這個''和這個'但沒有工作。我正確使用它？ – efirvida

請看我的代碼，你需要在URL（） –

Ups抱歉，但沒有奏效，現在resultan代碼是''和背景丟失 – efirvida

我可能考慮使用ng-style尋求解決方案。

當您更改背景時，在控制器內部更新您的$scope中的樣式對象，該對象由元素的ng-style引用。

查看關於ng-style的其他信息here。

UPDATE

請參閱以下plunkr http://plnkr.co/edit/dYIQ...，顯示了使用簡單的ng-style。當您選中並取消選中該複選框時，背景顏色將在紅色和藍色之間變化。

對於您的問題，您的myStyle對象可能類似於;

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

理想情況下，你不需要每次創建myStyle可變的，但例子給你如何可以使用一個簡單的例子。

希望能幫助你！

來源

2015-09-04 14:50:56 jh3y

我看到了文檔，但沒有弄清楚該怎麼做 – efirvida

我已經用plunkr更新了我的答案，以向你展示我的意思。只需選中複選框並查看紅色和藍色之間的背景顏色變化。 – jh3y

在稍後的更新中，我相信你可以只做'myStyle.background ='url（...）';'而不是再次創建對象。這只是向您展示其工作原理的一種簡單方法。 – jh3y

使用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。

來源

2015-09-04 15:06:49

正如我在其他評論中說的，我有一個合成結果HTML如''現在缺少背景，因爲'style =」background-image：url（http：// localhost：3000/assets/img/backgrounds /）;「'沒有圖片網址 – efirvida

你的html文件和圖片位於哪裏，它們是否在同一個文件夾中？請向我們展示目錄樹。我想你可以使用'../ assets/img/backgrounds/{{bgimg}}'如果資產文件夾和您當前的html文件位於相同的目錄中。 –

動態塞汀使用AngularJs控制器背景圖像

回答

相關問題