Question

考虑某条路线，让我们说 myapp \ profile 有两种模式（买方/卖方）我想要实现的是：

为两种模式保留相同的路线网址
使用不同的HTML文件（比如buyer.html，seller.html）替换视图，当然每个视图都有它的视图模型。
在两种模式之间共享一些逻辑。
我想为每种模式设置控制器/逻辑

我已经考虑过了：

考虑使用 ui-router的子状态，但我不想更改网址。
考虑创建这个＆＃39;个人资料＆＃39;路线和导航到它时，计算模式（买方/卖方），然后$ state.go到一个新状态（但同样，我想在最后保留相同的路线名称，所以它不行）
理想情况下，我可以导航到我的共享控制器，然后渲染正确的视图和控制器，但这个想法有点搞砸了我。

你能分享一下干净利落的方式吗？

Answer 1

大多数用例

通常，为了动态选择状态模板，您可以使用函数：

state = {
    .....
    templateUrl: function($stateParams){
         if ($stateParams.isThis === true)
             return 'this.html'
         else
             return 'that.html'
    }
}

但...

不幸的是，您无法将其他注射剂传递给templateUrl函数。 UI.Router只传递$stateParams。您不希望以任何方式更改URL，因此您无法使用它。

当您需要注入超过$ stateParams

时

但您可以使用templateProvider代替。使用此功能，您可以将服务传递到templateProvider功能，以确定您的用户是买方还是卖方。您还需要使用UI.Router的$templateFactory服务轻松提取和缓存模板。

state = {
    ....
    templateProvider: function($templateFactory, profileService){
        var url = profileService.isBuyer ? 'buyer.html' : 'seller.html';
        return $templateFactory.fromUrl(url);
    }
}

这是在你的plunkr工作 - http://plnkr.co/edit/0gLBJlQrNPUNtkqWNrZm?p=preview

文档：

Angularjs：我可以拥有一个包含多个视图的路线吗？

1 个答案:

大多数用例

但...

当您需要注入超过$ stateParams