如何通过指令内的路由切换视图?
How to switch views with routing inside a directive?
在学习 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:选中第一封邮件,下面显示其内容
如果您不想在 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>
在学习 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。
尚未选择任何电子邮件
如果您不想在 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>