Angular UI路由器动态地将URL注入html

时间:2016-02-03 07:06:53

标签: angularjs angular-ui-router

我正在尝试构建一个简单的应用程序,其方式如下:

导航栏中有2个菜单项:主页和联系人。

主页应该只是一次来自服务器的唯一URL,在初始化时,从QR码读取(我得到了覆盖,对我来说没问题)并且联系人应该始终是相同的。

我通过以下方式完成了联系:

$stateProvider.state('contact', {
            url: '/contact',
            templateUrl: 'src/views/contact.html',
            controller: 'contactController'
        })

问题在于home,它应该保留服务器接收的唯一URL。我应该如何写那个州的状态?

        .state('home', {
            url: '/:uid',
            templateUrl: 'src/views/home.html',
        })

此外,家庭应该保留服务器在刷新后以及从联系人导航到家庭时生成的唯一网址。

在HTML中我会有类似

的内容
<a ui-sref="home({uid: --some dynamic uid?--})">Home</a>

这是需要帮助的部分。

2 个答案:

答案 0 :(得分:1)

将家庭状态设置为

.state('home', {
    url: /{uid},
    templateUrl: 'src/views/home.html',
})

您可以通过将$stateParams注入控制器来获取参数。 $stateParams.uid将返回参数并将其存储在本地存储或cookie中。

检查此链接

https://github.com/angular-ui/ui-router/wiki/URL-Routing#stateparams-service

<强>更新

例如,这是附加到主页的样本控制器

app.controller('homeCtrl', function($stateParams) {
    var id = $stateParams.uid; //this is how you retrieve the uid
});

转到您的主页,例如http://www.example.com/abcd12345,上述$stateParams.uid将返回 abcd12345

现在设置网址。只需在ui-sref标记上使用href代替<a>即可。 ui-router将自动为您生成href

e.g。

<a ui-sref="home({uid:'abcd12345'})">Home</a>

答案 1 :(得分:-1)

您必须创建自定义提供程序并将其注入配置中。 例如: - .config($ stateProvider,$ urlRouterProvider,yourprovider)。 我不确定这一点。但请检查一下..