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

Question

I have a custom popover directive and another custom directive that uses that one. I'm trying to use ng-style to set the width of the popover. Here's a code snippet from the directive's html template:

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

Here's where it gets interesting: my-custom-popover also has an ng-style applied. Here's some code from my-custom-popover 's html template:

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

The problem is that when angular tries to render my directive, rather than being smart and simply adding my ng-style to the existing one, it simply concatenates them and results in a parsing error. By the time the browser sees my markup it looks like ng-style={'width': widthVar} {display: (condition ? 'block' 'none')} which is obviously incorrect.

Is there anyway to tell angular that my ng-style should be appended to the existing one and not just concatenated like is being done?

Answer 1

In general, it is not a good idea to use inline CSS rules because if you have several of the same rules in different elements and need to change them, you have to do so in each element which can be a hassle and you may miss one. Instead, I would just import a css file so that the rules can be easily changed.

Having said that, I would use ng-class in place of ng-style in your directive and apply CSS rules to the particular classes.

For example, you can replace

ng-style="{display: (condition ? 'block' : 'none')}"

with

ng-class="{'show-div': show, 'hide-div': !show}"

and then create a css file and apply the following rules:

.show-div{display:block;}
.hide-div{display:none;}

Answer 2

Apparently, it's currently not possible to merge attributes: read this open issue .

Alternatively, you might consider using the following suggested workaround on your custom directive:

compile: function compile(tElement, tAttrs, transclude) {
  tAttrs.ngClass = tAttrs.ngClass.replace(/}\s*{/g, ', ');
  // ...
}

It then fixes the incorrect {'width': widthVar} {display: (condition ? 'block' 'none')} to {'width': widthVar, display: (condition ? 'block' 'none')} by replacing } { with , before it is compiled.

See also dariocravero 's fiddle.