不适用于angular指令元素的基本较少样式

I have the following directive, 'icon':

我有以下指令'icon':

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

Along with a jade file that uses said directive, like so:

与使用所述指令的玉文件一样,如下所示:

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

And I have the following less file that styles the element icon:

我有以下较少的文件来设置元素图标的样式:

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

For whatever reason, these styles aren't being applied to my directive. This isn't a problem with compiling the less file or the directive -- if I restrict the directive to classes with restrict: 'C', and change the jade file to use the icon class with .icon(ng-click='foo()'), as well as change the less file to specify .icon { ... }, then everything works fine.

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

Any help would be greatly appreciated! I'm pretty stumped at the moment.

任何帮助将不胜感激!我此刻很难过。

1 个解决方案

#1

The Jade markup provided in the question would essentially get compiled as shown below:

问题中提供的Jade标记基本上会编译如下:

Jade markup:

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

Compiled HTML:

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

Height and width apply only to block level elements. Since the icon is a non-standard tag, the browser would not know whether it has to be rendered as a block level element or an inline element (or inline-block). The browser has to be specifically instructed to display it as a block level element and this can be done by setting the display property to block using CSS.

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

Demo

Converting the Jade markup to

将Jade标记转换为

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

and using the class selector (.icon) to specify the properties in CSS would work because of the way Jade works. In Jade, whenever you do not provide a tag name and provide only the class, it is assumed to be a div tag. div being a standard tag, the browser would know that it is a block level element and hence would apply the defined CSS properties.

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

Compiled HTML: (for the markup using .icon class)

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

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

Quoting Jade - Language Reference:

引用玉 - 语言参考:

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

由于div是标签的常见选择,因此如果省略标签名称,则默认为

#1