Javascript 用户在不知道元素指令是如何组成的情况下，如何在AngularJS中设置元素指令的样式？

首先，对不起，我的英语很差

我最近在学习AngularJS，我发现AngularJS的很多概念都非常先进，尤其是指令。它很像

影子DOM

或

Web组件

，甚至更好

但是我提出了一个关于该指令的问题（我们只讨论带有“E”限制的指令，并且有一个模板将替换或插入到该指令中。）

也就是说：指令用户（而不是指令的编写者）如何在不知道指令如何符合的情况下设置指令的样式？用户如何确保其样式不会覆盖指令的样式

正如您所知，指令是一个可重用的组件，在很多情况下，用户不是指令的编写者，他只是使用它

让我们举一个例子： 用HTML编写的指令如下：

my将替换为以下Emmet表达式（或更复杂的表达式）：

div>h1+ul>li*8>a+img

问题来了，用户如何设置这个myDirective的样式？用户不知道指令的DOM结构

当被模板替换时，他是否应该检查devtools中的指令，然后为替换的DOM设置样式

或者他应该去检查指令的源代码

如果用户设置指令的样式，应如何避免覆盖

或者指令编写器应该使用指令的名称空间设置指令的样式

我认为这是AngularJS指令必须面对的一个大问题。

---

请注意，这与

影子DOM

或

Web组件

不同，因为后者的样式不能被用户覆盖，它在一个独立的样式范围内。

要设置html块的样式，无论代码是什么，都必须至少查看一次。抓取标记，然后继续设置其样式。大多数情况下，您都可以在template属性中看到代码。（大多数情况下，其他一些情况下，标记是一种组合）。 如果标记不包含特定的类，那么当您（用户）开始对其进行样式化时，就不必面对任何样式化问题，这将是非常理想的

如果您是指令代码的所有者，那么事情应该非常简单。更重要的是，您可以指定templateUrl属性的url，该属性仅包含给定指令的html代码

我还鼓励您应用OOCSS技术来设计可重用对象的样式。作为一项建议，避免使用您在帖子中指定的选择器，因为它们的性能不太好

关于你的问题：

1和2，是的，它们是有效的选项。 3和4，调查OOCSS技术和CSS特异性概念

希望这有帮助,

---

致以最诚挚的问候。

我猜您案例中的用户就是编写css的设计师。你可以给他看你的模板。如果您不使用

replace:true

，他还可以使用指令名称的选择器专门设置每个指令的样式。另外，在您决定使用

restrict:'E'

之前，我建议您阅读IE指南。这个问题不是针对Angular指令的，而是针对所有web组件之前的Javascript插件。Web组件在Angular at的未来会被提及，尽管没有给出太多细节。