a.html
b.html
c.html
d.html
a.html のバインディング イベントにより、コンテンツ ビューが c.html または d.html に切り替わります
$stateProvider の構成を構成する方法 jsで手動で切り替えるにはどうすればよいですか?
あなたの質問には必要な文脈情報が欠けているため、推測または推測に頼って回答するしかありません
どの SPA フレームワークのルーティング システムも同じです。各ルートはアプリケーションのステータスに対応し、アプリケーションのステータスの変更は URL の変更に反映されます。逆に、URL の変更によりルーティング システムが動的に更新されます。アプリケーション プログラムのステータス。
あなたの例では、ルートエントリには定数 ui-view='content' のみが含まれていますが、異なるビュー (c.html と d .html) は動的に入力します。つまり、c.html と d.html はアプリケーションのさまざまな状態に対応する必要があるため、ルーティング システムはこれを動的に実行できます。更新されました。 ui-view='content',但却要不同的视图(c.html 和 d.html)动态的进入其中,这就意味着 c.html 和 d.html 要对应应用程序的不同状态,路由系统才可以据此而动态的更新。
ui-view='content'
d .html) は動的に入力します。つまり、c.html と d.html はアプリケーションのさまざまな状態に対応する必要があるため、ルーティング システムはこれを動的に実行できます。更新されました。 ui-view='content',但却要不同的视图(c.html 和 d.html)动态的进入其中,这就意味着 c.html 和 d.html 要对应应用程序的不同状态,路由系统才可以据此而动态的更新。
假设你的例子是这样的:
当 /posts/show/c 的时候,ui-view='content' 显示 c.html
/posts/show/c
当 /posts/show/d 的时候,ui-view='content' 显示 d.html
/posts/show/d
于是我们才可以对应到 ui-router 里面:
state 是 posts.show
state
posts.show
动态片段,即 URLs 中可变的部分,对应 state 里的 url,我把它命名为 :name
url
:name
view 的入口是 content@posts.show
view
content@posts.show
这样便足以写出绝大部分代码了:
angular.module('YourApp').config(function ($stateProvider) { $stateProvider.state('posts.show', { url: '/show/:name', views: { 'content@posts.show': { templateUrl: /* TODO */, controller: ... } } }); });
唯一剩下的问题是:当 :name 变化的时候,如何更新 templateUrl?
templateUrl
之前说过的,URLs 的变化会引发路由系统更新应用程序的状态,这些变化在路由系统中被保存在 $params 对象中,我们可以用该对象提取变化的部分并生成正确的 templateUrl。在这里我写一个助手函数来做这件事情:
$params
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 不只是接收字符串,也可以接收函数的返回值。于是你可以得到:
当 /posts/show/c 的时候,templateUrl 是 templates/posts/c.html
templates/posts/c.html
当 /posts/show/d 的时候,templateUrl 是 templates/posts/d.html
templates/posts/d.html
相应的,在你 index 里的导航链接就要负责切换 /posts/show/:name
index
/posts/show/:name
上の人たちはゲームを複雑にしすぎていると思います。UI ビューのチュートリアルを見るだけでも良いと思いませんか? https://scotch.io/tutorials/a...# 🎜🎜#
あなたの質問には必要な文脈情報が欠けているため、推測または推測に頼って回答するしかありません
どの SPA フレームワークのルーティング システムも同じです。各ルートはアプリケーションのステータスに対応し、アプリケーションのステータスの変更は URL の変更に反映されます。逆に、URL の変更によりルーティング システムが動的に更新されます。アプリケーション プログラムのステータス。
あなたの例では、ルートエントリには定数
ui-view='content'
のみが含まれていますが、異なるビュー (c.html
とd .html) は動的に入力します。つまり、
c.html
とd.html
はアプリケーションのさまざまな状態に対応する必要があるため、ルーティング システムはこれを動的に実行できます。更新されました。ui-view='content'
,但却要不同的视图(c.html
和d.html
)动态的进入其中,这就意味着c.html
和d.html
要对应应用程序的不同状态,路由系统才可以据此而动态的更新。假设你的例子是这样的:
当
/posts/show/c
的时候,ui-view='content'
显示c.html
当
/posts/show/d
的时候,ui-view='content'
显示d.html
于是我们才可以对应到 ui-router 里面:
state
是posts.show
动态片段,即 URLs 中可变的部分,对应
state
里的url
,我把它命名为:name
view
的入口是content@posts.show
这样便足以写出绝大部分代码了:
唯一剩下的问题是:当
:name
变化的时候,如何更新templateUrl
?之前说过的,URLs 的变化会引发路由系统更新应用程序的状态,这些变化在路由系统中被保存在
$params
对象中,我们可以用该对象提取变化的部分并生成正确的templateUrl
。在这里我写一个助手函数来做这件事情:ui-router 这个模块,
templateUrl
不只是接收字符串,也可以接收函数的返回值。于是你可以得到:当
/posts/show/c
的时候,templateUrl
是templates/posts/c.html
当
/posts/show/d
的时候,templateUrl
是templates/posts/d.html
相应的,在你
例が次のようになっているとします: 🎜index
里的导航链接就要负责切换/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
を生成します。ここでこれを行うためのヘルパー関数を作成します: 🎜 リーリー 🎜ui-router このモジュールtemplateUrl
は文字列だけでなく関数の戻り値も受け取ります。したがって、次のものが得られます: 🎜/posts/show/c
の場合、templateUrl
はtemplates/posts/c.html
になります🎜/posts/show/d
の場合、templateUrl
はtemplates/posts/d.html
になります🎜index
のナビゲーション リンクは、/posts/show/:name
の変更を切り替える役割を果たします。 ui の動的フラグメントに対応するリンクを生成する方法。 -router これはドキュメントに記載されているので、自分で調べてください。 🎜上の人たちはゲームを複雑にしすぎていると思います。UI ビューのチュートリアルを見るだけでも良いと思いませんか?
https://scotch.io/tutorials/a...# 🎜🎜#