如何通过ng-style为进度条动态设置Chrome和Firefox兼容样式？

Great question! I've run into this exact issue before—Angular's ng-style doesn't play nice with pseudo-elements because they're not part of the DOM elements Angular directly binds to. Let's break down a few solid solutions depending on your use case:

方案1：使用CSS变量（最简洁，推荐现代浏览器） #

CSS variables let you define dynamic values on elements that pseudo-elements can reference. This is the cleanest approach for modern browsers, as it leverages native CSS functionality with minimal Angular code.

First, set up your base CSS to reference a variable for the progress bar styles:

/* Chrome/Safari */
progress::-webkit-progress-bar {
  background-color: var(--progress-bg, #eee); /* Fallback color if variable isn't set */
}
/* Firefox */
progress::-moz-progress-bar {
  background-color: var(--progress-bg, #eee);
}

Then use ng-style to dynamically set the CSS variable on your progress element:

<progress ng-style="{'--progress-bg': dynamicColor}"></progress>

In your controller, define and update the dynamicColor variable as needed:

$scope.dynamicColor = '#ff4444'; // Initial red color
// Later, update it dynamically (e.g., on user input or data change)
$scope.updateProgressColor = function(newColor) {
  $scope.dynamicColor = newColor;
};

方案2：自定义指令（兼容旧浏览器） #

If you need to support older browsers that don't handle CSS variables, a custom Angular directive can dynamically generate style rules for the pseudo-elements.

Create the directive:

angular.module('yourApp').directive('dynamicProgressStyle', function() {
  return {
    scope: {
      bgColor: '='
    },
    link: function(scope, element) {
      // Create a style element to hold our pseudo-element rules
      const styleElement = document.createElement('style');
      element.parent().append(styleElement);

      // Watch for color changes and update the style rules
      scope.$watch('bgColor', function(newColor) {
        if (!newColor) return;
        
        styleElement.textContent = `
          ${element[0].tagName}::-webkit-progress-bar {
            background-color: ${newColor} !important;
          }
          ${element[0].tagName}::-moz-progress-bar {
            background-color: ${newColor} !important;
          }
        `;
      });
    }
  };
});

Use the directive in your HTML:

<progress dynamic-progress-style bg-color="dynamicColor"></progress>

Your controller can still update dynamicColor the same way as the first solution— the directive will automatically sync the pseudo-element styles.

方案3：预定义 CSS 类（适合固定颜色集合） #

If your dynamic colors are limited to a predefined set, using ng-class to toggle pre-written CSS classes is straightforward and avoids dynamic style generation.

Define your classes in CSS:

.progress-red::-webkit-progress-bar,
.progress-red::-moz-progress-bar {
  background-color: #ff4444;
}

.progress-blue::-webkit-progress-bar,
.progress-blue::-moz-progress-bar {
  background-color: #33b5e5;
}

.progress-green::-webkit-progress-bar,
.progress-green::-moz-progress-bar {
  background-color: #99cc00;
}

Toggle the class with ng-class:

<progress ng-class="{'progress-red': selectedColor === 'red', 'progress-blue': selectedColor === 'blue', 'progress-green': selectedColor === 'green'}"></progress>

In your controller:

$scope.selectedColor = 'red'; // Initial color
// Switch colors as needed
$scope.setColor = function(color) {
  $scope.selectedColor = color;
};

Pick the solution that fits your browser support needs and how dynamic your colors are. The CSS variable method is my go-to for most modern projects—it's clean and requires the least code.

内容的提问来源于stack exchange，提问作者Balchandar Reddy