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>

现在我有两个问题：

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

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

Answer 1

这正是 UI-路由器的用途：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>

AngularJS 的多个局部视图

Multiple partial views on AngularJS

javascript

angularjs

angularjs-module

angular-directive