What is the best way to make ng-style append to a pre-existing style?

Question

What is the best way to make ng-style append to a pre-existing style?

I am facing an issue with my custom popover directive and another custom directive that uses it. I am attempting to use ng-style to adjust the width of the popover. Below is a code snippet from the directive's html template:

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

What's intriguing is that my-custom-popover also has an applied ng-style. Here's a snippet from its html template:

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

The dilemma arises when angular attempts to render my directive. Instead of intelligently adding my ng-style to the existing one, it simply concatenates them, leading to a parsing error. Ultimately, the browser interprets my markup as

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

, which obviously is incorrect.

Is there a way to instruct angular to append my ng-style to the existing one rather than just concatenate them?

html css angularjs angularjs-directive

Answer 1

Answer №1

It is generally not recommended to use inline CSS styles because managing multiple instances of the same rule in different elements can be cumbersome and error-prone. Instead, consider importing a CSS file where changes can be made easily and consistently.

In light of this, I suggest using ng-class over ng-style in your directive to apply CSS rules based on specific classes.

For instance, you could replace

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

with

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

Then, create a CSS file and add the following rules:

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

Answer 2

It is generally not recommended to use inline CSS styles because managing multiple instances of the same rule in different elements can be cumbersome and error-prone. Instead, consider importing a CSS file where changes can be made easily and consistently.

In light of this, I suggest using ng-class over ng-style in your directive to apply CSS rules based on specific classes.

For instance, you could replace

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

with

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

Then, create a CSS file and add the following rules:

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

Answer 3

Answer №2

It appears that merging attributes is not currently possible, as discussed in this ongoing issue.

If you're looking for a solution, you may want to try out the workaround suggested for custom directives like this:

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

This workaround corrects instances like

{'width': widthVar} {display: (condition ? 'block' 'none')}

by replacing } { with , before compilation.

For further reference, check out dariocravero's fiddle.

Answer 4

It appears that merging attributes is not currently possible, as discussed in this ongoing issue.

If you're looking for a solution, you may want to try out the workaround suggested for custom directives like this:

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

This workaround corrects instances like

{'width': widthVar} {display: (condition ? 'block' 'none')}

by replacing } { with , before compilation.

For further reference, check out dariocravero's fiddle.

What is the best way to make ng-style append to a pre-existing style?

Answer №1

Answer №2

Similar questions

Cross-origin request blocked on DELETE operation due to preflight failure

What is the difference between a CSS background image and a default background?

Should you construct a fresh element using JavaScript, or opt to reveal a concealed one using CSS?

Numerous elements positioned absolutely are overlapping

Tips for aligning the dropdown menu to start from the border of the menu bar instead of displaying directly below the text

Tips for organizing the data you have collected from the table

Indent the text within a span element that is displayed as an inline block

How to Adjust the Padding of Tree Row in GWT?

The initial item in the Materializecss slider is failing to display

Table featuring identical submit buttons in each row: initial submit button is nonfunctional (potential issue with multiple identical IDs)

The Safari browser is having trouble rendering the website's CSS and HTML properly

Activate the timepicker in Bootstrap when the user clicks on the input field

The inner HTML functionality in Angular 2 seems to be malfunctioning when dealing with HTML tags

Utilizing jQuery's POST Method to Fetch JSON Data on a Website

The PHP form in an HTML file fails to function properly if multiple forms are included

Utilize a fresh function in Angular to retrieve and store data from a URL into a variable

Pattern to filter out numeric values from a collection

ngCordova camera functions properly on emulator, but encounters issues on actual devices

Using Angular's built-in dependency injection with the $resource factory allows for

Implementing MySQL in JavaScript code leads to various possibilities