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

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'
        })

但问题是 - 我不想更改页面 URL。 我希望它保持“http://localhost/index.html”而不是“http://localhost/index.html#/mailboxes/inbox/53”，因为在同一页面上我将有多个小部件，我不希望它们在页面刷新后消失。

我想我可以通过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

如果您不想在 URL 上显示更改（但我认为没有任何可能的理由不这样做）。

您别无选择，只能使用指令，我认为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>