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，并且不尊重您应用到该元素的元素样式。