javascript - AngularJS 元素指令上的 CSS 样式未呈现

Question

所以这几天我一直在努力解决这个问题，似乎找不到好的解决办法。

当我将类添加到 AngularJS 元素指令时，样式显示在浏览器 (Chrome) 代码 View 中，但未呈现样式。

我正在尝试为我的自定义指令元素“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'
    };
});

Chrome 屏幕截图(请注意如何在元素“sss”上设置背景颜色，但它不会在浏览器中呈现。“Welcome Anonymous | Sign In”文本应该被这种背景颜色包围因为该文本位于“sss”元素内。)

Answer 1

将 display: block; 添加到您的 ss 中，您应该会看到背景颜色