如何在指令內使用路由切換視圖？

雖然學習角我已經實現Ember.js電子郵件插件從他們的主頁（它不是由某種原因顯示plunkr）： http://plnkr.co/edit/OACzZbDHyNNNYM9oG5gB?p=preview 如何在指令內使用路由切換視圖？

不幸的是他們的源代碼看起來比我的角的版本的它更清潔和更小...

我已經實現了它創建一個自定義指令 <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＃。是不是還選擇沒有電子郵件 Inactive mailbox 圖2：第一封電子郵件被選擇，其內容顯示如下 Active mailbox with 1st message selected

來源

2015-04-28 yaru

如果你不想顯示的URL 的變化（但我不」不要認爲有任何可能的原因不）。

你沒有的choise，但使用的指令，我覺得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>

來源

2015-04-28 15:07:29 Matho

感謝您的建議。我只是明白，沒有任何東西阻止我爲每個子視圖分配不同的ng-controller指令:) – yaru

如何在指令內使用路由切換視圖？

回答

相關問題