如何强制 ng-style 添加到现有样式？答案

【问题标题】：How do I force ng-style to ADD to an existing style?如何强制 ng-style 添加到现有样式？
【发布时间】：2015-05-20 00:32:41
【问题描述】：

我有一个自定义 popover 指令和另一个使用该指令的自定义指令。我正在尝试使用 ng-style 设置弹出框的宽度。这是指令的 html 模板中的代码 sn-p：

<div my-custom-popover ng-style="{'width': widthVar}">
    ...
</div>

这里是有趣的地方：my-custom-popover 也应用了 ng 样式。这是my-custom-popover的html模板中的一些代码：

<div ng-style="{display: (condition ? 'block' : 'none')}">
    ...
</div>

问题在于，当 Angular 尝试渲染我的指令时，而不是聪明地简单地将我的 ng 样式添加到现有指令中，它只是将它们连接起来并导致解析错误。当浏览器看到我的标记时，它看起来像ng-style={'width': widthVar} {display: (condition ? 'block' 'none')}，这显然是不正确的。

有没有办法告诉 Angular 我的 ng 样式应该附加到现有的样式中，而不仅仅是像正在完成的那样连接？

【问题讨论】：

您尝试放入模板了吗？
对不起，我可能不清楚。这两个代码 sn-ps 都来自各自指令的模板。我将编辑原始问题。
在使用指令时使用style="width:{{widthVar}}"，在指令模板中使用ng-style。

标签： html css angularjs angularjs-directive

【解决方案1】：

一般来说，使用内联 CSS 规则不是一个好主意，因为如果您在不同的元素中有多个相同的规则并且需要更改它们，则必须在每个元素中都这样做，这可能会很麻烦，而且您可能会错过一个。相反，我只是导入一个 css 文件，以便可以轻松更改规则。

话虽如此，我将在您的指令中使用 ng-class 代替 ng-style 并将 CSS 规则应用于特定的类。

例如，你可以替换

ng-style="{display: (condition ? 'block' : 'none')}"

与

ng-class="{'show-div': show, 'hide-div': !show}"

然后创建一个 css 文件并应用以下规则：

.show-div{display:block;}
.hide-div{display:none;}

【讨论】：

【解决方案2】：

显然，目前无法合并属性：read this open issue。

或者，您可以考虑在自定义指令中使用以下suggested workaround：

compile: function compile(tElement, tAttrs, transclude) {
  tAttrs.ngClass = tAttrs.ngClass.replace(/}\s*{/g, ', ');
  // ...
}

然后它通过在编译之前将 } { 替换为 , 将不正确的 {'width': widthVar} {display: (condition ? 'block' 'none')} 修复为 {'width': widthVar, display: (condition ? 'block' 'none')}。