Question

我正在使用 angular.js ，我正在考虑使用content将通知写为div:after。我想要像 facebook 系统这样的 angular js 功能，但是当值为0时它不会隐藏。

.tool{
 
  float:left;
  padding:10px 20px;
  border-radius:5px;
  font-size:20px;
  position:relative;
  color: white;
}

.tool:after{
  content: attr(notification);
  color:white;
  top:5px;
  left:40px;
  border-radius:5px;
  background:red;
  position:absolute;

}

<div notification="12" class="tool">
<img width="40" height="40"  src="http://www.crackmymba.com/wp-content/uploads/2015/07/MAT-2015-Notification.png">
</div>

Answer 1

<div notification="{{notifications}}" class="tool" ng-class="{'show-notification': notifications.length > 0}">
<img width="40" height="40"  src="http://www.crackmymba.com/wp-content/uploads/2015/07/MAT-2015-Notification.png">
</div>

实现此目的的一种方法是使用变量填充通知属性。（在示例中：notifications）。

如果通知长度大于0，则动态地向该元素添加一个类。ng-class="{'show-notification': notifications.length > 0}"

然后在css中你可以做到：

.show-notification:after{
  content: attr(notification);
}

我如何使用'css：after'和'css：before'使用'ng-show'和'ng-hide'

1 个答案: