关于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;}}}])

实现的效果如下：

到此结束。