我有以下指令“ 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文件或指令并不是问题-如果我将指令限制为with的类restrict: 'C'，并更改jade文件以使用with的图标类.icon(ng-click='foo()')，以及将less文件更改为指定.icon { ... }，则一切正常。美好的。
任何帮助将不胜感激！我现在很沮丧。
问题中提供的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非标准标记，因此浏览器将不知道是否必须将其呈现为块级元素或内联元素（或内联块）。必须特别指示浏览器将其显示为块级元素，这可以通过将display属性设置为block使用CSS来完成。
将Jade标记转换为
.icon(ng-click='foo()')
h1 Some stuff
p Some other stuff
并且.icon由于Jade的工作方式，因此可以使用类选择器（）在CSS中指定属性。在Jade中，只要不提供标签名称而仅提供类，就假定它是div标签。div作为标准标记，浏览器将知道它是一个块级元素，因此将应用定义的CSS属性。
编译的HTML ：（用于使用.icon类的标记）
<div ng-click="foo()" class="icon">
<h1>Some stuff</h1>
<p>Some other stuff </p>
</div>
引用玉-语言参考：
由于div是标签的常见选择，因此如果省略标签名称，则为默认设置
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句