Question

我有以下指令，'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 { ... }，然后一切正常。

任何帮助将不胜感激！我现在很难过。

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>

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

Demo

将Jade标记转换为

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

并使用类选择器（.icon）来指定CSS中的属性，因为Jade的工作方式。在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是标签的常见选择，因此如果省略标签名称则为默认值

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

1 个答案: