Looking to change the background-image of an element upon clicking it.
Currently, this is what's in place:
<div class="item-center text-center" toggle-class="active cable">
<div class="quiz-background"></div>
<p class="size1 quiz-text">Cable</p>
</div>
CSS:
.quiz-background {
width: 80%;
min-height: 100px;
background-image: url(images/ofertas/Cable_darkBlue.png);
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
margin: auto;
top: 20px;
position: relative;
}
.cable .quiz-background {
background-image: url(images/ofertas/Cable_lightBlue.png);
}
Toggle-class directive:
'use strict';
angular.module('libertyprApp')
.directive('toggleClass', function() {
return {
restrict: 'EA',
link: function(scope, elem, attrs) {
elem.bind('click', function() {
elem.toggleClass(attrs.toggleClass);
});
}
}
});
At present, the background image toggles with the class swap. However, the goal is to achieve this through inline styling
style="background-image: url(...)"Any suggestions for accomplishing this using Angular?
Thank you!
EDIT
This is what has been implemented so far, which seems to be working but unsure if it's optimal:
<div class="item-center text-center circle-image-quiz" toggle-class="active cable">
<div class="quiz-background" style="background-image: url(images/ofertas/Cable_darkBlue.png);"></div>
<p class="size1 quiz-text">Cable</p>
</div>
and CSS:
.quiz-background {
width: 80%;
min-height: 100px;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
margin: auto;
top: 20px;
position: relative;
}
.cable .quiz-background {
background-image: url(images/ofertas/Cable_white.png)!important;
}
This approach involves toggling the class with the background image taking precedence over the inline styled one.
Adopting this method as there will be multiple elements requiring different background images on click and not clicked states.