使用ui-route很多的時(shí)候需要控制頁(yè)面跳轉(zhuǎn)。

而監(jiān)聽(tīng)路由狀態(tài)的變化是最開(kāi)始的切入點(diǎn)，我們可以再注入$location服務(wù)進(jìn)行跳轉(zhuǎn)邏輯管理。

在ui-route的api-doc中，便給我們介紹了幾個(gè)event，這樣可以使得我們很簡(jiǎn)單就能知道路由變化的狀態(tài)。

以下我就記錄一下ui-route0.x版本的監(jiān)聽(tīng)方法

var app=angular.module(“app”,[“ui-route”])

//先配置一些跳轉(zhuǎn)頁(yè)面

app.config(“$stateProvider”,”$urlStateProvider”,function($stateProvider,$urlStateProvider){

? ? $stateProvider.state(“l(fā)ogin”,{

? ? ? ? url:”/login”

? ? ? ? templateUrl:”login.html”

? ? })

})

//我們開(kāi)始初始化全局監(jiān)聽(tīng)事件

app.run(“$rootScope”，[function($rootScope){

? ? //訂閱一個(gè)監(jiān)聽(tīng)事件

? ? $rootScope.$on(“$stateChangeStart”,function(toState,fromState){

? ? function body.........

? })

}])

說(shuō)明：

&stateChangeStart是ui-route模塊內(nèi)置的事件

回調(diào)函數(shù)的參數(shù)是固定的，toState,fomState分別表示“跳轉(zhuǎn)到的狀態(tài)”、“跳轉(zhuǎn)前的狀態(tài)”

這樣注冊(cè)完一個(gè)事件，在跳轉(zhuǎn)的時(shí)候就會(huì)自動(dòng)監(jiān)聽(tīng)。響應(yīng)你給定的一系列邏輯了。

更多api 可參考源碼：https://github.com/angular-ui/ui-router