如何在 div:after 中使用 ng-style？

【问题标题】：How do I use ng-style with div:after?如何在 div:after 中使用 ng-style？
【发布时间】：2018-09-10 18:43:03
【问题描述】：

我正在使用 Angular 1.x。

这是 jsfiddle 上的 code example。

如果 ctrl.shouldShowDiv2 = false 我不想显示 div2 否则 (ctrl.shouldShowDiv2 = true) 我想激活 box::after。有没有办法让它与ng-style 或任何其他指令一起工作？

This answer 看起来和我想要的很像，但我看不懂。

谢谢。

【问题讨论】：

嗨托尼。正如您提出的那样，您的问题不会对其他人有用（特别是如果您删除了您的 jsfiddle，这可能会发生）。而是粘贴一些代码并显示您尝试过的内容。这会让人们帮助你

标签： html css angularjs angular-directive

【解决方案1】：

你可以做的是创建一个单独的类，你可以在上面使用::after 选择器。然后使用ctrl.shouldShowDiv2 切换该类。这是一个例子：

angular.module('app', []);

.box {
  height: 150px;
  width: 200px;
  overflow: hidden;
  position: relative;
  background: tomato;
}

.box-xtra::after {
  content: "div2";
  width: 100px;
  height: 20px;
  position: absolute;
  top: 10px;
  left: -30px;
  transform: rotate(-45deg);
  background-color: white;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
<div ng-app="app">
  <div style="margin-bottom: 10px;">
    <label>Show div2 <input type="checkbox" ng-model="ctrl.shouldShowDiv2" /></label>
  </div>
  <div class="box" ng-class="{'box-xtra': ctrl.shouldShowDiv2}"></div>
</div>

【讨论】：