html - 如何强制 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 样式添加到现有指令，而是简单地将它们连接起来并导致解析错误。当浏览器看到我的标记时，它看起来像 ng-style={'width': widthVar} {display: (condition ? 'block' 'none')} 这显然是不正确的。

有没有办法告诉 angular 我的 ng-style 应该附加到现有的 ng-style 而不是像正在做的那样只是连接起来？

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