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

Question

我有一个自定义的弹出框指令和另一个使用它的自定义指令。我正在尝试使用ng-style来设置弹出框的宽度。以下是指令HTML模板中的代码片段：

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

有趣的是，这里就变得有趣了：my-custom-popover 还应用了一个 ng-style。以下是来自 my-custom-popover HTML 模板的代码:

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

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

有没有办法告诉Angular我的ng-style应该附加到现有的样式中，而不只是像现在这样连接起来呢？

- kevin

---

你试过将其放入模板中吗？ - ThomasP1988

抱歉，我的表达可能不够清晰。这两段代码片段都来自各自指令的模板。我将编辑原始问题。 - kevin

在指令中使用 style="width:{{widthVar}}"，并在指令模板中使用 ng-style。 - Vinay K

Answer 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;}

- user3276472

Answer 2

目前似乎无法合并属性：阅读此开放问题。

或者，您可以考虑在自定义指令中使用以下建议的解决方法：

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')}。

另请参见dariocravero的fiddle。

- falsarella