如何使用AngularJS動態加載多個模板？

Question

我是AngularJS的新手，來自PHP背景，我在服務器上完成所有的模板聚合。使用PHP，我會抓住幾個模板，將它們混合在一起，然後發送給客戶端瀏覽器。 AngularJS允許我使用ng-view插入模板。這很好，但它並不處理我插入的模板可能包含其他模板佔位符的標籤的情況。例如，我可能有以下爲我的模板之一：

<div class="some_class"> 
    <div class="another_class"> 
     {content} 
    </div> 
</div> 

在PHP我會插入這個模板，然後用另一個模板替換{content}內容。在AngularJS中，我知道如何插入主模板（使用ng-view），但我不知道如何動態地將我的「部分模板」加載到{content}標記中。這與AngularJS有什麼關係？

Answer 1

一個簡單的方法是使用ngInclude directive：

<div class="some_class"> 
    <div class="another_class"> 
    <ng-include src="templatePath"></ng-include> 
    </div> 
</div> 

然後，在與此模板關聯控制器，你可以定義動態的變量templatePath：

function MyCtrl($scope){ 
    $scope.templatePath = // define this var dynamically here 
} 

Answer 2

使用ng-view嵌套多個模板目前在Angular.js中本地不支持。但是，有多種選擇來模擬該功能。請參閱this SO question中的幾個選項的答案，其中包括akonsu建議的ui路由器。