AngularJS元素指令上的CSS樣式未呈現

Question

因此，我一直在嘗試解決該問題幾天，似乎無法找到一個好的解決方案。

當我向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 （這是element指令的模板）

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

Chrome屏幕截圖 （請注意，如何在元素“ sss”上設置背景顏色，但未在瀏覽器中呈現背景顏色。“歡迎匿名|登錄”文本應被該背景顏色包圍，因為該文本位於“ sss”元素內）

Answer 1

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

Answer 2

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