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 框架的路由系統都是一樣的：每一個路由對應著應用程式的狀態，而應用程式狀態的變化體現在URLs 的變化上；反之也是，URLs 的變化將會引起路由系統動態的刷新應用程序的狀態。

在你的例子，路由的入口只有恆定的一個 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 的時候，/posts/show/c 的时候，templateUrl 是 templates/posts/c.html 是 templates/posts/c.html

• 當 /posts/show/d 的時候，/posts/show/d 的时候，templateUrl 是 templates/posts/d.html 是 templates/posts/d.html

對應的，在你 index 里的导航链接就要负责切换 /posts/show/:name 的變化，如何產生對應動態片段的連結在 ui-router 的文檔裡有，自己去找來看吧。

Answer 2

我覺得樓上的人打得太複雜，隨便看個ui-view的 教程不就好了嗎
https://scotch.io/tutorials/a...