javascript - AngularJS 的多个部分 View

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 - 如果是这种情况，请关闭嵌入，或添加另一个 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>