首先是示例：

成都創(chuàng)新互聯(lián)公司是一家專注于成都網(wǎng)站設(shè)計、成都網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)與策劃設(shè)計,昌樂網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設(shè)十余年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:昌樂等地區(qū)。昌樂做網(wǎng)站價格咨詢:18982081108

這是我自己寫的一個路由demo，這里我們可以看到，頁面由一個導(dǎo)航條，以及內(nèi)容頁組成，導(dǎo)航條上有三個按鈕，分別對應(yīng)了三個頁面，而頁面會在內(nèi)容頁進(jìn)行更新，并不會重新請求新頁面。

而我們看到的home頁上的三行文字，并不是在同一個頁面上，實際上是由額外的3個頁面組織起來的。

ui-sref-active指令檢測當(dāng)前的激活狀態(tài)，如果你的頁面激活的是這個路由，則該標(biāo)簽會激活active樣式，ui-sref定義了當(dāng)前按鈕指向的路由，具體地址的組成可以看圖。

 

這里定義了具體的路由策略。

如果路由到/home，則目標(biāo)的模板地址為./bt.html（你存放靜態(tài)頁面的路徑），以此類推

home.bt2則定義了該路由的子路由，以此類推。

最后一行代碼定義了非定制的路由策略請求時會重定向到/home/bt2/bt3，注意這里書寫的參數(shù)格式?。?！

這樣，當(dāng)我們訪問這個頁面時，會通過重定向引導(dǎo)到/home/bt2/bt3的URL上，所以在該過程中所有的相關(guān)html都會被加載，我們從網(wǎng)絡(luò)請求就可以看出，路由是根據(jù)頁面的請求順序依次向服務(wù)器請求頁面的。

最近在工作里發(fā)現(xiàn)項目里的路由定義里有這么一句：

targetHeader: {org: true, space: false},

后來本人也寫了個demo嘗試了一下，弄懂了這句話的用途以及在項目里的功能。

首先，本人在路由定義里也加了這幾句話，并且在對應(yīng)頁面的控制器里加了作用域的賦值表達(dá)式。

查詢了ui-router的文檔，在路由中由用戶自行定義的屬性可以在$state的current屬性中獲取到，我們將它賦值給$scope對象對應(yīng)的屬性。

然后就可以在頁面中顯示它。

頁面代碼：

<div class="header">我是bt,我接收到了targetHeader.org:`targetHeader`.`org`,和targetHeader.space:`targetHeader`.`space`</div>

之后我給每一個子路由都給了個自定義屬性，然后發(fā)現(xiàn)了一個問題。項目中這個組件是一直存在的，如果不是重新發(fā)送請求的話，這個組件的作用域狀態(tài)不會更改，即使我們在路由上重新定義了屬性的值。

那么怎么解決這個問題呢？

我查看了一下$state的源代碼，看有這么一行代碼

$rootScope.$broadcast('$stateChangeSuccess', to.self, toParams, from.self, fromParams);

這不就是之前研究過的作用域通信嗎？所以，我們只要在代碼里捕獲這個句柄，在路由狀態(tài)改變時重新獲取一次值就可以了

代碼如下：

$rootScope.$on("$stateChangeSuccess", function() {
    $scope.targetHeader = $state.current.targetHeader;
});

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

分享標(biāo)題：ui-router的探究-創(chuàng)新互聯(lián)
網(wǎng)站網(wǎng)址：http://sd-ha.com/article12/jjhgc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、網(wǎng)站設(shè)計公司、網(wǎng)站設(shè)計、云服務(wù)器、微信公眾號、網(wǎng)站營銷

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)