angular.js - angularjs ui-router 动态切换视图到指定的ui-view中

Question

a.html

<p ui-view='index'></p>

b.html

<p ui-view='content'></p>

c.html

<p>content1</p>

d.html

<p>content2</p>

a.html中绑定事件触发content视图切换到c.html或d.html

$stateProvider的config应该怎么配置
js里如果手动做切换？

Answer 1

あなたの質問には必要な文脈情報が欠けているため、推測または推測に頼って回答するしかありません

どの 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

这样便足以写出绝大部分代码了：

angular.module('YourApp').config(function ($stateProvider) {

    $stateProvider.state('posts.show', {
        url: '/show/:name',
        views: {
            'content@posts.show': {
                templateUrl: /* TODO */,
                controller: ...
            }
        }
    });

});

唯一剩下的问题是：当 :name 变化的时候，如何更新 templateUrl？

之前说过的，URLs 的变化会引发路由系统更新应用程序的状态，这些变化在路由系统中被保存在 $params 对象中，我们可以用该对象提取变化的部分并生成正确的 templateUrl。在这里我写一个助手函数来做这件事情：

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

• 当 /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 が表示されます🎜

🎜したがって、ui-router に対応できます: 🎜

• 🎜state は posts.show です🎜
• 🎜動的フラグメント、つまり URL の可変部分は、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 これはドキュメントに記載されているので、自分で調べてください。 🎜

Answer 2

上の人たちはゲームを複雑にしすぎていると思います。UI ビューのチュートリアルを見るだけでも良いと思いませんか?
https://scotch.io/tutorials/a...# 🎜🎜#