如何在指令中使用路由切换视图？

Question

在学习Angular时，我已经从他们的主页实现了Ember.js电子邮件小部件（由于某种原因，它没有在plunkr中显示）： http://plnkr.co/edit/OACzZbDHyNNNYM9oG5gB?p=preview

不幸的是，他们的源代码看起来比我的Angular的版本更清晰，更小......

我已经实现了它创建自定义指令 <art-mailbox></art-mailbox>

现在，我想通过在消息列表下方但在单独页面上显示不在同一页面上的电子邮件来更改默认行为。

基本上我想为我的小部件的右侧部分添加路由，如下所示：

function config($routeProvider) {
    $routeProvider
        .when('/mailboxes/:mailboxId/:messageId', {
            templateUrl: 'messageView.html',
            controller: 'MessageCtrl'
        })
        .when('/mailboxes/:mailboxId', {
            templateUrl: 'messagesListView.html',
            controller: 'MessagesListCtrl'
        })

但问题是 - 我不想更改网页网址。 我希望它留下来＆＃34; http://localhost/index.html＆＃34;而不是＆＃34; http://localhost/index.html#/mailboxes/inbox/53＆＃34;因为在同一页面上我会有多个小部件，我不希望它们在页面刷新后消失。

我认为我可以通过ng-switch指令实现视图转换，但我不喜欢这种方法，因为我不具备为每个视图配置自定义控制器的能力。

它有点难看。看看自己：

<section class="main">
    <div ng-switch="vm.activeMailboxId">
        <div ng-switch-when="none">
            <div ng-include="'partials/mailbox.default.html'"></div>
        </div>
        <div ng-switch-default>
            <div ng-include="'partials/mailbox.details.html'"></div>
        </div>
    </div>
</section>

图片1：绿色框 - 小部件＃1，红色框 - 小部件＃2。 尚未选择任何电子邮件 图2：选择了第一封电子邮件，其内容显示在下方

Answer 1

如果您不想在网址上显示更改（但我不认为有任何可能的原因，请不要这样做）。

你没有选择但是使用指令，我认为ng-switch不是一种糟糕的方法，但其他可能的实现是实现ng-include指令并将templateUrl绑定到当你需要它时，那个指令。

可能是这样的：

<a href="#" ng-click="selectTemplate(value)'>Inbox 2</a>
//or
<a href="#" ng-click="currentTemplate='inbox2.html'>Inbox 2</a>

<div class="">
  <div ng-include="currentTemplate"></div>
</div>