AngularJS的多个部分视图

Question

我有一个AngularJS应用程序，它在菜单上有一个内容列表。当用户单击菜单上的项目时，内容将加载到主视图上。有多种内容类型：

单击“1”时，将加载视频。单击“2”时，将加载PDF文档，依此类推。内容类型可能重复且复杂。

现在，我在点击某个项目时设置$scope.content，并且根据其contentType，我正在调用另一个指令：

<div class="content" ng-switch on="content.contentType">
    <div ng-switch-when="video">
        <videoplayer-directive video="content"></videoplayer-directive>
    </div>
    <div ng-switch-when="pdf">
        <pdfreader-directive pdf="content"></pdfreader-directive>
    </div>
    <div ng-switch-when="...">
        <...-directive content="content"></...-directive>
    </div>
</div>

现在我有两个问题：

1. 加载页面时，会自动加载所有指令模板。即使菜单中没有PDF，也会加载pdf模板和脚本。
2. 搜索它，我了解到指令应该很小，而不是我应用程序的整个模块。

如何重写上面的开关，以便我可以遵守最佳实践并仅在需要时加载模板和脚本？

Answer 1

这正是UI-Router的用途：Angular UI Router

关于scotch.io

的体面教程

更轻松地替换代码可能只需使用ng-if。 Ng-if在调用之前不会实例化指令。只要确保你的指令不转换外部div-如果是这种情况，关闭transclusion，或者添加另一个div来包装它们。

<div class="content">
<div ng-if="content.contentType=='video'">
    <videoplayer-directive video="content"></videoplayer-directive>
</div>
<div ng-if="content.contentType=='pdf'">
    <pdfreader-directive pdf="content"></pdfreader-directive>
</div>
<div ng-if="content.contentType=='...'">
    <...-directive content="content"></...-directive>
</div>
</div>