Question

我有一个自定义popover指令和另一个使用该指令的自定义指令。我正在尝试使用ng-style来设置popover的宽度。这是指令的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')}，这显然是不正确的。

有没有告诉棱角分析我的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')}，将错误的} {修复为,。

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

2 个答案: