如何使用AngularJS动态加载多个模板？

Question

我是一个PHP开发者，刚开始接触AngularJS。在PHP中，我会在服务器上聚合多个模板，然后将它们一起发送到客户端浏览器。而AngularJS允许我使用ng-view插入一个模板。这很好，但是它无法处理我插入的模板中可能包含其他模板的占位符标记的情况。例如，以下是我的其中一个模板:

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

在 PHP 中，我会插入这个模板，然后使用另一个模板替换 {content} 的内容。在 AngularJS 中，我知道如何插入主模板（使用 ng-view），但我不确定如何动态加载我的“部分模板”到 {content} 标签中。请问在 AngularJS 中应该如何完成这个任务？

- Nancy Collier

---

也许是https://github.com/angular-ui/ui-router？ - akonsu

使用像akonsu所说的ui-router。 - holographic-principle

Answer 1

一个直截了当的方法是使用ngInclude指令：

<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
}

- Stewie

Answer 2

目前在Angular.js中，原生不支持使用ng-view来嵌套多个模板。但是，有多种方法可以模拟该功能。请参见此SO问题中的答案，其中包括由akonsu建议的ui-router。

- John Woodruff