AngularJS元素指令不渲染CSS樣式

所以我一直試圖解決這個問題幾天，似乎無法找到一個很好的解決方案。AngularJS元素指令不渲染CSS樣式

當我向AngularJS元素指令中添加一個類時，樣式顯示在瀏覽器（Chrome）代碼視圖中，但樣式未呈現。

我想添加一個背景顏色到我的自定義指令元素「sss」。

這是我的源代碼：

_home-了header.html（這是我的元件指令「SSS」用於）

<div class="home-dash-wrapper"> 
    <tone-today></tone-today> 
    <div class="home-dash"> 
     <set-tone></set-tone> 
     <sss></sss> 
    </div> 
</div>

_sss.html（這是爲元素指令模板）

<div class="sign-in"> 
    <span>Welcome Anonymous | </span><span class="sign-in-button">Sign In</span> 
</div>

_sss.scss（即應用樣式的SASS的樣式表）

sss{ 
    background-color: #E9E9EA; 
} 

.sign-in{ 
    width: 100%; 
    padding: 10px; 

    text-align: right; 
}

_home.js（該AngularJS指令申報）

var app = angular.module('tone-home', []); 

app.directive('sss', function() { 
    "use strict"; 
    return { 
     restrict: 'E', 
     templateUrl: 'app/src/templates/modules/_sss.html' 
    }; 
});

鉻截圖（注意背景色是如何設置的元素「sss」，但它沒有在瀏覽器中呈現。「歡迎匿名|登錄」文本應該被背景顏色包圍，因爲該文本位於「sss」元素內部。） Browser isn't rendering background color on sss element

來源

2014-12-04 staticinteger

奇怪的行爲的確，你可以複製該問題在plunker？ – SoluableNonagon 2014-12-04 19:38:47

另外，你有沒有嘗試過使用類？ .sss background-color：＃E9E9EA; }和 – SoluableNonagon 2014-12-04 19:40:02

我正在爲我工作的公司編寫此代碼，所以我寧願不給出超出我所擁有的數量（我必須做的重做）。但是，如果我沒有找到解決辦法，那麼我可以繼續做下去。是的，我嘗試使用類而不是。這也不起作用... – staticinteger 2014-12-04 19:41:41

添加display: block;您sss，你應該看到的背景色

來源

2014-12-04 19:46:50

這個答案是正確的！非常感謝！ – staticinteger 2014-12-04 19:48:30

瀏覽器無法理解元素SSS，因此它被忽略。使用調試工具，您應該看到SSS元素的大小爲0 x 0，並且您所應用的元素樣式不受尊重。

來源

2014-12-04 19:44:22 Enzey

啊，是的，我看到了。有沒有解決這個問題的方法？ – staticinteger 2014-12-04 19:45:29

讓瀏覽器瞭解元素的唯一方法是通過WebComponents創建一個新元素：http://www.html5rocks.com/en/tutorials/webcomponents/customelements/?redirect_from_locale=ru 但是，這種瀏覽器的瀏覽器非常有限支持。 – Enzey 2014-12-04 19:48:02

AngularJS元素指令不渲染CSS樣式

回答

相關問題