angular的uiRouter服務學習(5) --- $state.includes()方法

詩&遠方發表於2015-05-27
AngularUI

$state.includes方法用於判斷當前啟用狀態是否是指定的狀態或者是指定狀態的子狀態.

$state.includes(stateOrName,params,options)

$state.includes方法接受三個引數,其中第二和第三個都不知道是幹啥的...估計也不太用得到,就暫時不管了...

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下的變數.這樣在表示式裡才能使用:

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

 

相關文章