我有一个自定义弹出指令和另一个使用该指令的自定义指令。我正在尝试使用 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 而不是像正在做的那样只是连接起来?
最佳答案
一般来说,使用内联 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;}
关于html - 如何强制 ng-style 添加到现有样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29101481/