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

Posted 2023-03-06

【中文标题】如何强制 ng-style 添加到现有样式？

【英文标题】：How do I force ng-style to ADD to an existing 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。

【参考方案1】：

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

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

例如，你可以替换

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

与

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

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

.show-divdisplay:block;
.hide-divdisplay: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')。

See also dariocravero's fiddle.