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

任何 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 的时候,templateUrl 是 templates/posts/c.html

  • 当 /posts/show/d 的时候,templateUrl 是 templates/posts/d.html

相应的,在你 index 里的导航链接就要负责切换 /posts/show/:name 的变化,如何生成对应动态片段的链接在 ui-router 的文档里有,自己去找来看吧。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值