a.html
リーリーb.html
リーリーc.html
リーリーd.html
リーリーa.html のバインディング イベントにより、コンテンツ ビューが c.html または d.html に切り替わります
$stateProvider の構(gòu)成を構(gòu)成する方法
jsで手動で切り替えるにはどうすればよいですか?
あなたの質(zhì)問には必要な文脈情報が欠けているため、推測または推測に頼って回答するしかありません
どの SPA フレームワークのルーティング システムも同じです。各ルートはアプリケーションのステータスに対応し、アプリケーションのステータスの変更は URL の変更に反映されます。逆に、URL の変更によりルーティング システムが動的に更新されます。アプリケーション プログラムのステータス。
あなたの例では、ルートエントリには定數(shù) ui-view='content'
のみが含まれていますが、異なるビュー (c.html
と d .html) は動的に入力します。つまり、
c.html
と d.html
はアプリケーションのさまざまな狀態(tài)に対応する必要があるため、ルーティング システムはこれを動的に実行できます。更新されました。 ui-view='content'
,但卻要不同的視圖(c.html
和 d.html
)動態(tài)的進入其中,這就意味著 c.html
和 d.html
要對應(yīng)應(yīng)用程序的不同狀態(tài),路由系統(tǒng)才可以據(jù)此而動態(tài)的更新。
假設(shè)你的例子是這樣的:
當(dāng) /posts/show/c
的時候,ui-view='content'
顯示 c.html
當(dāng) /posts/show/d
的時候,ui-view='content'
顯示 d.html
于是我們才可以對應(yīng)到 ui-router 里面:
state
是 posts.show
動態(tài)片段,即 URLs 中可變的部分,對應(yīng) state
里的 url
,我把它命名為 :name
view
的入口是 content@posts.show
這樣便足以寫出絕大部分代碼了:
angular.module('YourApp').config(function ($stateProvider) {
$stateProvider.state('posts.show', {
url: '/show/:name',
views: {
'content@posts.show': {
templateUrl: /* TODO */,
controller: ...
}
}
});
});
唯一剩下的問題是:當(dāng) :name
變化的時候,如何更新 templateUrl
?
之前說過的,URLs 的變化會引發(fā)路由系統(tǒng)更新應(yīng)用程序的狀態(tài),這些變化在路由系統(tǒng)中被保存在 $params
對象中,我們可以用該對象提取變化的部分并生成正確的 templateUrl
。在這里我寫一個助手函數(shù)來做這件事情:
angular.module('YourApp').config(function ($stateProvider) {
$stateProvider.state('posts.show', {
url: '/show/:name',
views: {
'content@posts.show': {
templateUrl: getTemplateUrl,
controller: ...
}
}
});
function getTemplateUrl() {
return: 'templates/posts/' + $params.name + '.html';
}
});
ui-router 這個模塊,templateUrl
不只是接收字符串,也可以接收函數(shù)的返回值。于是你可以得到:
當(dāng) /posts/show/c
的時候,templateUrl
是 templates/posts/c.html
當(dāng) /posts/show/d
的時候,templateUrl
是 templates/posts/d.html
相應(yīng)的,在你 index
里的導(dǎo)航鏈接就要負責(zé)切換 /posts/show/:name
/posts/show/c
の場合、ui-view='content'
には c.html
が表示されます??/posts/show/d
の場合、ui-view='content'
では d.html
が表示されます??state
は posts.show
です??state
の url
に対応します。これを :name
と名付けました。 /li>
view
入り口は content@posts.show
です??:name
が変更されたときに templateUrl
を更新する方法です。 ??
?? 前に述べたように、URL を変更すると、ルーティング システムがアプリケーションのステータスを更新します。これらの変更は、ルーティング システムの $params
オブジェクトに保存されます。このオブジェクトを使用して、変更された部分を修正し、正しい templateUrl
を生成します。ここでこれを行うためのヘルパー関數(shù)を作成します: ??
リーリー
??ui-router このモジュール templateUrl
は文字列だけでなく関數(shù)の戻り値も受け取ります。したがって、次のものが得られます: ??
/posts/show/c
の場合、templateUrl
は templates/posts/c.html
になります??/posts/show/d
の場合、templateUrl
は templates/posts/d.html
になります??index
のナビゲーション リンクは、/posts/show/:name
の変更を切り替える役割を果たします。 ui の動的フラグメントに対応するリンクを生成する方法。 -router これはドキュメントに記載されているので、自分で調(diào)べてください。 ??上の人たちはゲームを複雑にしすぎていると思います。UI ビューのチュートリアルを見るだけでも良いと思いませんか?
https://scotch.io/tutorials/a...# ????#