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，如果是這種情況，請關閉包含，或添加另一個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>