html - 基本的 less 样式不适用于 Angular Directive(指令)元素

Question

我有以下指令，“图标”:

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

连同使用上述指令的 jade 文件，如下所示:

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

我有以下 less 文件来设置元素 icon 的样式:

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

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

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

Answer 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>

高度和宽度只适用于 block 级元素。由于 icon 是一个非标准标签，浏览器不知道它是否必须呈现为 block 级元素或内联元素(或内联 block )。必须特别指示浏览器将其显示为 block 级元素，这可以通过使用 CSS 将 display 属性设置为 block 来完成。

Demo

---

将 Jade 标记转换为

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

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

已编译的 HTML:(对于使用 .icon 类的标记)

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

引用 Jade - Language Reference :

Since div's are such a common choice of tag, it is the default if you omit the tag name