基本较少的样式不适用于角度指令元素答案

【问题标题】：Basic less styling not applying to angular directive element基本较少的样式不适用于角度指令元素
【发布时间】：2014-09-18 06:16:50
【问题描述】：

我有以下指令，'icon'：

myApp.directive('icon', function() {
    return {
        restrict: 'E',
        replace: false,
        link: function(scope, elem, attrs) {
            elem.bind('mouseover', function() {
                elem.css('cursor', 'pointer');
            });
        }
    };
});

连同使用所述指令的玉文件，如下所示：

icon(ng-click='foo()')
    h1 Some stuff
    p Some other stuff

我有以下更少的文件来设置元素icon：

icon {
    height: 100px;
    width: 100px;
}

无论出于何种原因，这些样式都没有应用于我的指令。这不是编译 less 文件或指令的问题——如果我将指令限制为带有restrict: 'C' 的类，并将jade 文件更改为使用带有.icon(ng-click='foo()') 的图标类，以及更改less 文件指定.icon { ... }，然后一切正常。

任何帮助将不胜感激！我现在很困惑。

【问题讨论】：

我猜 .icon 会起作用，因为 Jade 可能会创建一个 div 标签，其类为 icon。 div 是一个块元素，因此将应用高度和宽度。您可以尝试将display: block 添加到您的CSS 中吗？另外，icon 是一个有效的 HTML 标记吗？
添加display: block 成功了！谢谢！
@Harry 自 HTML5 以来，“有效 HTML 标记”的概念已被“弃用”，在新的 WebComponents API 中更是如此。此外，如果它适用于 OP，您可以发布您的评论作为答案:)
@gustavohenke：谢谢提醒队友。最初我想在添加为答案之前断言 Jade 的行为，但后来完全忘记了：D

标签： html css angularjs less pug

【解决方案1】：

问题中提供的 Jade 标记基本上会按如下所示进行编译：

Jade 标记：

icon(ng-click='foo()')
    h1 Some stuff
    p Some other stuff

编译后的 HTML：

<icon ng-click="foo()">
  <h1>Some stuff</h1>
  <p>Some other stuff</p>
</icon>

高度和宽度仅适用于块级元素。由于icon 是非标准标记，浏览器将不知道它是否必须呈现为块级元素或内联元素（或内联块）。必须明确指示浏览器将其显示为块级元素，这可以通过使用 CSS 将 display 属性设置为 block 来完成。

Demo

将 Jade 标记转换为

.icon(ng-click='foo()')
    h1 Some stuff
    p Some other stuff

由于 Jade 的工作方式，使用类选择器 (.icon) 来指定 CSS 中的属性会起作用。在 Jade 中，只要您不提供标签名称而只提供类，它就会被假定为 div 标签。 div 是一个标准标签，浏览器会知道它是一个块级元素，因此会应用定义的 CSS 属性。

已编译的 HTML：（用于使用 .icon 类的标记）

<div ng-click="foo()" class="icon">
  <h1>Some stuff</h1>
  <p>Some other stuff    </p>
</div>

引用Jade - Language Reference：

由于 div 是一种常见的标签选择，如果您省略标签名称，则它是默认值

【讨论】：