假设我有一个带有模板的指令"mydirect“,其中包含很多带有很多嵌套类的div。例如:
<div class="mydirect">
<div class="classA">
<div class="subclassA">
<div class="subclassB">
</div>
<div class="classB"></div>
</div>
我注意到,尽管类名在css文件("mydirectstyle.css")中并且包含在index.html中,但使用我的指令:
angular.module("MyApp", []).
directive('mydirect', function() {
return {
restrict: 'E',
replace: true,
template: '-All that Html here-'
};
});
任何CSS属性都不会应用到它。将我的所有样式应用到这多个类的最佳方式是什么?是否可以这样做,使我不必手动选择每个元素并设置单独的CSS属性?
我的index.html页面包含一个被上面显示的指令模板替换的<mydirect> </mydirect>
。
发布于 2013-10-25 08:07:43
使用实际的元素名称在DOM中创建指令要比尝试使用class方法容易得多。出于两个原因: 1)使用<mydirect>
比使用<div class="mydirect">
更具可读性;2)只需使用正确的css语法,您就可以获得同样轻松的样式。
保持您的指令不变,除非将其更改为restrict: 'EA'
(该here的文档)和replace: false
,如下所示:
.directive('mydirect', function() {
return {
restrict: 'EA',
replace: false,
template: '-All that Html here-'
};
});
下面是您现在可以使用的选项,以及如何配置相应的CSS以获得所需的样式,如this jsbin中所示
希望这能有所帮助。
发布于 2015-10-16 23:45:20
根据google under和Angular指令创建逻辑,在下面示例的描述对象中,设置两个配置组件。首先,我们设置了限制配置选项。restrict选项用于指定如何在页面上调用指令。
正如我们之前看到的,有四种不同的方法来调用指令,因此有四个有效的restrict选项:
'A' - <span ng-sparkline></span>
'E' - <ng-sparkline></ng-sparkline>
'C' - <span class="ng-sparkline"></span>
'M' - <!-- directive: ng-sparkline -->
发布于 2013-10-25 05:52:54
我认为这个问题的解决方案很简单。但这只是一种猜测。您可以使用以下命令定义该指令:
<div class="mydirect></div>
在您的指令定义中,您使用:
restrict: 'E'
该指令不是由Angularjs呈现的,因为Angularjs正在寻找类似于:
<mydirect></mydirect>
只需将restrict: 'E'
更改为restrict: 'C'
。
https://stackoverflow.com/questions/19577027
复制相似问题