如何通过指令内的路由切换视图？

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" and not "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>

如何通过指令内的路由切换视图？

How to switch views with routing inside a directive?

angularjs

angularjs-directive

ngroute

ng-view