角度切換背景圖像

Question

我想在單擊元素時更改其背景圖像。

現在，這就是我所擁有的：

<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);
}

切換類的指令：

'use strict';

angular.module('libertyprApp')
.directive('toggleClass', function() {
  return {
    restrict: 'EA',
    link: function(scope, elem, attrs) {
      elem.bind('click', function() {
        elem.toggleClass(attrs.toggleClass);
      });
    }
  }
});

現在，背景圖像會切換，因為我正在切換班級的第二個背景。 但是我希望能夠實現內聯樣式style="background-image: url(...)"並能夠更改該內聯背景樣式。

有沒有辦法做到這一點角？

謝謝！

編輯

到目前為止，這是我所做的事情，它可以工作，但是如果是最好的方法，我就不是這樣：

<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>

和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;
}

通過這種方式，它會用背景圖像切換類，從而覆蓋內聯樣式的類。

我這樣做的原因是，我將擁有多個元素，這些元素在單擊和未單擊時使用不同的背景圖像。

Answer 1

您可以在控制器中設置諸如$scope.toggledActive ，然后可以使用ng-class通過切換類來更改背景。 然后，基於按鈕單擊，將toggledActive更改為true或false 。