Как переключать представления с маршрутизацией внутри директивы?

Question

Обучаясь Угловое я реализовал 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' 
     }) 

Но проблема - я не хочу, чтобы изменить адрес страницы. Я хочу, чтобы он оставался «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 (но я не» t думаю, что есть какая-то возможная причина для не).

У вас нет ВЫБИРАЕМ но использовать директивы, я думаю, ng-switch не плохой подход, но другой возможный вариант осуществления заключается в реализации ng-include директивы и связать templateUrl к этому directiven, когда вам это нужно.

Может быть что-то вроде этого:

<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>