Angularjs 带填充的容器指令

根据人们使用的“导航”指令，页面内容需要有一定的填充

这是由“content”指令完成的，这里称为“container”

当元素位于容器内时，应用于容器的填充或边距似乎存在渲染问题。但是，当只有文本时没有问题

我制作了两个片段，除了里面的div之外，代码完全相同。 第二个代码段没有左填充

angular.module（'app'，[]）
.directive（'container'，function（）{
返回{
限制：'E'，
链接：功能（范围、元素）{
css（'border'，'1px实心红色'）；
css（'padding'，'100px'）；
}
};
});

测试
最好的方法是添加css：

container{
  display: block;
}

否则，将padding/margin设置为指令内的内部div：


angular.module（'app'，[]）
.directive（'container'，function（）{
返回{
限制：'E'，
链接：功能（范围、元素）{
element.children（）.css（'border'，'1px实心红色'）；
element.children（）.css（'padding'，'100px'）；
}
};
});

测试
Its-because
div
是块元素，嵌套在内联元素中。将
display:block
应用于
container
元素，这两个元素的结果看起来都一样。这是在指令中选择显示（block，inline）的方法吗？不，没有。您可以将class
element.addClass（'displayBlockClass'）
添加到指令中，或将硬代码规则
container{display:block}
添加到样式表中。