下面说一说如何通过ionic实现一个红点标志信息。
我们知道现在的很多app，当信息有变动时，系统会及时通知我们有信息变态，一般会在标签处定义一个红点，有一些甚至直接标出一个圆的红点包括有多少条动态信息，比如微博。
我们要实现的功能其实也是差不多的，如下图：
可以看到，其实ionic的tab标签有一个badge的标签可以很容易实现这个功能
<ion-tab title="Status" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" ui-sref="tab.dash" badge="12" badge-style="badge-assertive">
<ion-nav-view name="tab-dash"></ion-nav-view>
</ion-tab>
可以看到，直接赋值badge=12,选择样式badge-style="badge-assertive"(也就是红点)，那么在加载的时候就会显示成如下这个样子：
其实我们可以把badge=12替换成一个变量，这个变量我们就可以在controller来执行与服务端的通信获取值，然后再赋值显示出来，这样子就可以与逻辑业务整合起来，动态显示，比如badge="num",变量'num'就可以在controller中通过$scope.num = 12 赋值。同时需要注意，badge的值大于0才会显示红点，等于0的话，红点不会显示的。
这一个功能是ionic已经帮我们封装好了，可以很方便的使用，但是像下面的在tab标签上只是标注一个红点，代表有信息更新的时候，这个就需要自己写代码实现了。
其实我们可以分析ionic的badge的一些方法就可以很容易的获取到一些关键的知识点，
创建一个指令：
.directive('tabRedPoint', function($compile, $timeout){
return {
restrict: 'A',
replace: false,
link: function(scope, element, attrs, controller) {
var key = attrs.tabRedPoint || false;
var template ="<span ng-class={true:'tabs-red-point',false:''}["+key+"]></span>";
var $class = 'a.'+attrs.class;
var html = $compile(template)(scope);
$timeout(function() {
$($class).css({
"position":'relative',
}).append(html);
},100);
}
};
})
在ion-tab中定义使用这个指令，它的用途就是在tab的实际标签中添加一个字元素，也就是var template ="<span ng-class={true:'tabs-red-point',false:''}["+key+"]></span>"这个模板，然后将它的父元素设为"position":'relative'，那么这个子元素就可以相对于父元素执行绝对定位了。那么可以定义tabs-red-point类，根据var key = attrs.tabRedPoint || false，也就是指令的值来决定是否显示tabs-red-point，指令值等于true时，执行tabs-red-point类样色，false时，不显示。那么我们需要定义tabs-red-point类的样色。
.tabs-red-point {
position: absolute;
top: 4%;
right: calc(50% - 16px);
height: 6px;
width: 6px;
border-radius: 3px;
background-color: red
}
那么整个用法：
<ion-tab class="tab-has-red-point" title="Account" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" ui-sref="tab.account" tab-red-point="isActive">
<ion-nav-view name="tab-account"></ion-nav-view>
</ion-tab>
必须要定义一个类，在这里我定义为class="tab-has-red-point"，这个类名可以随意，但是不要在每一个tab中都定义相同的类，因为这个类var $class = 'a.'+attrs.class，最终就是相当于那个父级元素，确定唯一的父级元素。
tab-red-point="isActive"这个是指令，isActive是变量，可以在controller中通过$scope.isActive来设置true或者false，当然true或者false是由是否存在动态信息而设定的。
（2）如果在头部的信息通知栏中有一些设置的信息更新时，那么又该如何设置呢？
如下图：
同样，我们也是定义一个指令head-red-point
.directive('headRedPoint', function($compile, $timeout){
// Runs during compile
return {
restrict: 'A',
replace: false,
link: function(scope, element, attrs, controller) {
var key = attrs.headRedPoint || false;
var template ="<span ng-class={true:'tabs-red-point',false:''}["+key+"]></span>";
var html = $compile(template)(scope);
$timeout(function() {
var test = angular.element(element).parent().append(html)
},100)
}
};
})
head-red-point指令实现的功能和上面的标签基本是一样的，也是在一个父级的元素下添加一个圆点的子元素，当然，这个圆点的之元素相对于父元素绝对定位的。
tabs-red-point依然是上面定义的类。指令的值等于true时，显示红点，指令的值等于false时不显示红点。
例如用法
<ion-nav-buttons side="right">
<button class="button button-icon" ng-click="popovershow()" head-red-point='true'><i class="icon ion-ios-more"></i></button>
</ion-nav-buttons>