AngularJS：如何在我的视图中覆盖指令的样式？答案

【问题标题】：AngularJS : How do i override directive's style in my view?AngularJS：如何在我的视图中覆盖指令的样式？
【发布时间】：2016-08-30 17:34:35
【问题描述】：

我在我的视图中调用error-stuff 指令，如下所示，我试图在我的视图中将指令的填充 15px 覆盖为 0px，这不起作用。所以我的 div1 的值和 div2 的值不在一条直线上，因为 div2 在我看来需要更多的填充。

 Error:
          Oops !!! Its look like something going wrong !!! Please try again later ...


<div id="div1" class="row">
   <div  class="pull-left">
      <span>Error :</span>
   </div>

    <div id="div2" style="padding:0px; vertical-align:top">
        <error-stuff></error-stuff>
    </div>
</div>

error-stuff 指令上的 html 模板如下

<div class="error-class">
   <span>Oops !!! Its look like something going wrong !!! Please try again later 
    ...  </span>
</div>

在我的 app.css 中

.error-class
{
margin-bottom:20px;
padding:15px;
box-sizing:border-box;
line-height:1.5;
font-size:15px;
}

那么我如何通过将指令 padding:15px 覆盖为 padding:0px 来使 div1 和 div2 内容成直线？

【问题讨论】：

标签： angularjs html css angular-directive

【解决方案1】：

假设error-stuff在其他地方使用并且你不能改变全局css，在这种情况下你可以通过在css中指定父级来使用目标覆盖

#div2 .error-class {
    padding: 0;
}

【讨论】：