javascript - ng 风格间歇性工作

Question

我正在使用 ng 样式更改容器类的背景颜色(来自第三方 tallinn.css)。颜色是从数据库中加载的。当我通过 angular 的路由导航时，容器的 ng-style 属性停止工作，并且没有任何内容加载到元素的内联样式中。我在容器 div 中放置了一个 div，并使用相同的 ng-style 和 scope 变量设置它的背景颜色，它每次都有效。当我进行硬重载和清空缓存时，它似乎每次都能正常工作。这是 chrome 调试器失败时显示的内容: Debugger

如您所见，“容器”div 上的样式标签是空的，但内部 div 上的样式标签填充了正确的背景色 rgb(65,87,251)。

代码:

//inside angular controller
function setStyles(colors) {
  //set theme styles
  if (colors) {
    $scope.styles = {
      menuBackground: colors.Menu.Background.HexCode // "#4157FB"
    };
  }

}

//inside tallinn.css
.navigation .container {
  background-color: #000000;
  bottom: 0px;
  padding: 40px 40px;
  position: absolute;
  top: 0px;
  width: 300px;
  z-index: 1000;
}

<div class="container" ng-style="{'background-color': styles.menuBackground}">
  {{styles.menuBackground}}
  <div ng-style="{'background-color': styles.menuBackground}" style="height:200px; width:200px"></div>
</div>

我尝试了几种不同的方法来让它工作，例如使用指令(同样的问题)然后切换到 ng-style。

这可能是 css 何时加载与 ng-style 应该从 js 加载样式的时间问题吗？

感谢任何帮助!

编辑:

澄清一下，“背景色”的颜色是动态的，从数据库中加载。这就是为什么我使用 ng-style 而不是在 CSS 中对其进行硬编码的原因。 ng-style 应该覆盖上面显示的 CSS (tallinn.css) 中的“背景颜色”，因为它(应该)将样式置于内联状态。但这不是...

Answer 1

有一个变通办法。变通办法是:

<div class="container" ng-class="{'backColorMenu': true}">
  {{styles.menuBackground}}
</div>

在 CSS 中...

.backColorMenu{
  background-color:#4157FB;
}

请告诉我这个剂量是否有效!祝你好运

编辑

看到你的评论后你的六色不是静态的所以你可以用这种格式来做..

Controller :

$scope.styles = {
background-color: "#4157FB" //May need quotes or not.. Not sure
}

HTML:

<div class="container" ng-style="styles">
      {{styles.menuBackground}}
    </div>