Question

所以我正在尝试为某种步进箭头进度条创建一个指令。

请参阅此codepen以了解我在说什么。（请注意，我在函数范围中编写了params以便更容易阅读。）

我现在面临的问题是，我想将颜色作为param 传递给我的指令，我需要将颜色应用于类和：after属性。

我使用该样本来改变块头类的背景颜色，使用ng-style。我使用的ng-class是为了开始和结束。

<div ng-repeat="element in elements"
 class="block-head"
 ng-class="{'block-head-first': $first, 'block-head-last': $last}"
 ng-style="{'width' : selectedKey === element.key ? 'calc(100% - ' + 
 widthCalc + 'px)' : '',
 'background-color': getColor($index)}">

$scope.widthCalc = ($scope.elements.length - 1) * 26
$scope.getColor = function($index) {
    if ($scope.elements[$index].key === $scope.selectedKey)
      return $scope.colors['current']
    if ($scope.elements[$index].key < $scope.selectedKey)
      return $scope.colors['success']
    if ($scope.elements[$index].key > $scope.selectedKey)
      return $scope.colors['disable']
}

以下是我想用ng风格改变的代码示例（我将其设置为浅蓝色，以便您直观地了解我想要改变的内容）。

.block-head:after {
  color: lightblue;

我想到了两个可能的修复，但我不知道如何做到这一点。首先是在纯css中以背景颜色“冥想”父母的颜色值（甚至不确定它是否可能？）。第二个是在我的js代码中创建类，并使用ng-class使用这些类。

所有相关问题（here和here）总是建议使用ng-class，但我看不出明显的解决方法。

在不使用ng-class的情况下以ng样式更改属性

0 个答案: