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

Question

我有一个自定义popover指令和另一个使用该指令的自定义指令。我正在尝试使用ng样式来设置弹出窗口的宽度。下面是来自指令的html模板的代码片段：

<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风格应该附加到现有的风格上，而不是像正在做的那样只是连接在一起？

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

Answer 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 's fiddle.