关于angular的$state.include()方法与ui-sref和ui-sref-active的使用或者关于angular激活状态的判断

1.第一个方法：判断激活状态的方法就是$state.include()；

$state.includes方法用于判断当前激活状态是否是指定的状态或者是指定状态的子、父状态.

$state.includes方法接受三个参数,其中第二和第三个都不知道是干啥的...估计也不太用得到,就暂时不管了...

eg：$state.includes(stateOrName,params,options)；

stateOrName:字符串，
是一个状态的名字（一般是指路由状态名字）.

比如当前的激活状态是 "contacts.details.item" 

如下调用:

$state.includes("contacts");                              //返回true
$state.includes("contacts.details");                      //返回true
$state.includes("contacts.details.item");                 //返回true
$state.includes("detail");                                //返回undefined
$state.includes("item");                                  //返回undefined

也可以使用glob语法:

$state.$current.name = 'contacts.details.item.url';

$state.includes("*.details.*.*"); // returns true
$state.includes("*.details.**"); // returns true
$state.includes("**.item.**"); // returns true
$state.includes("*.details.item.url"); // returns true
$state.includes("*.details.*.url"); // returns true
$state.includes("*.details.*"); // returns undefined
$state.includes("item.**"); // returns undefined

可以用于激活某个tab,让当前项高亮显示:

<li ng-class="{active:state.includes('dashboard.report')}"><a ui-sref="dashboard.report">Reports</a></li>

需要注意的是,在表达式里直接用$state是不行的,需要在控制器中把$state赋值给$scope下的变量.这样在表达式里才能使用（本人用的时候就是不知道这一点浪费了很多时间），active是指:state.includes('dashboard.report')返回为true时添加类名“active”；

$stateProvider.state('dashboard',{
url:'/dashboard',
templateUrl:'./tpls/dashboard.html',
controller:function($scope,$state){
$scope.state = $state;
}
})

实现的结果如下：

2.第二种方法：ui-sref和ui-sref-active的结合使用

ui-sref=“rank”表示点击跳转到rank的状态页面去，同时让状态处于激活状态，ui-sref-active就是检测是否处于激活状态，eg：ui-sref-active=“cur”;如果返回为true就自动添加class类cur；例如：

<div class="top_nav">
<ul>
<li ui-sref-active="on">
<a href="" ui-sref='main'>推荐</a>
</li>
<li ui-sref-active="on"">
<a ui-sref='class'>分类</a>
</li>
<li class="" ui-sref-active="on">
<a ui-sref='bookbase'>书库</a>
</li>
<li ui-sref-active="on">
<a ui-sref='rank'>排行</a>
</li>
<li ui-sref-active="on">
<!--<i class="topnav-hot"></i>-->
<a ui-sref="pay">充值</a>
<!--  <i class="topnav-new"></i>-->
<!--  <a href="?r=">人气</a>-->
</li>
</ul>
</div>

然后在css中写相应的。cur对应的样式即可（省略）

实现的结果：



注意：这个只能实现点击当前页面才会激活，才会有相应的类名。才会实现想要的效果；如果不满足条件的时候就可以结合上面两点使用；

3.第三种方法：结合上面的两种方法：不解释，直接上代码：

html部分：

<div class="yw_tabbar" id="yw_tabbar">
<a ui-sref="main" class="yw_tabbar_item" ui-sref-active="cur" ng-class="{cur:state.includes('class')||state.includes('bookbase')||state.includes('rank')}">
<div class="yw_tabbar_icon yw_tabbar_icon_booklibs"></div>
<p class="yw_tabbar_label">书城</p>
</a>
<a ui-sref="bookstore" class="yw_tabbar_item" ui-sref-active="cur">
<div class="yw_tabbar_icon yw_tabbar_icon_mybooks"></div>
<p class="yw_tabbar_label">书架</p>
</a>
<a ui-sref="my" class="yw_tabbar_item" ui-sref-active="cur">
<div class="yw_tabbar_icon yw_tabbar_icon_user"></div>
<p class="yw_tabbar_label">我的</p>
</a>
</div>

js部分：

'use strict';
angular.module('app').directive('appFoot',[function(){
return{
restrict:'A',
replace:true,
templateUrl:'view/template/foot.html',
controller:function($scope,$state){
$scope.state=$state;
}
}
}])

实现的效果如下：



到此结束。