Question

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

如您所见，＆＃34;容器＆＃34;上的样式标签div为空，但内部div上的样式标签填充了正确的背景颜色rgb（65,87,251）。

代码：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

我尝试了几种不同的方法来实现这一点，例如使用指令（相同的问题）然后切换到ng-style。

这可能是一个时间问题，当css加载时与ng-style应该从js加载样式时？

感谢任何帮助！

修改

为了澄清，背景颜色的颜色为＆＃39;是动态的并从数据库加载。这就是我使用ng-style而不是在CSS中对其进行硬编码的原因。 ng-style应该覆盖＆＃39; background-color＆＃39;从上面显示的CSS（tallinn.css），因为它（应该）将样式内联。但它不是......

Answer 1

有一个解决方法..解决方法是：

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

在Css ......

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

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

修改

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

控制器：

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

HTML：

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

ng-style间歇性地工作

1 个答案: