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。

角度切换背景图像

1 个答案: