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

发布时间：2020-12-17 09:41:13 所属栏目：安全来源：网络整理

导读：我是AngularJS的新手,来自 PHP背景,我在服务器上进行所有模板聚合.使用PHP,我会抓取几个模板,将它们混合在一起,然后将其发送到客户端浏览器. AngularJS允许我使用ng-view插入模板.这很好,但是它不处理我插入的模板可能包含作为其他模板的占位符的标记的情况.

我是AngularJS的新手,来自 PHP背景,我在服务器上进行所有模板聚合.使用PHP,我会抓取几个模板,将它们混合在一起,然后将其发送到客户端浏览器. AngularJS允许我使用ng-view插入模板.这很好,但是它不处理我插入的模板可能包含作为其他模板的占位符的标记的情况.例如,我可能将以下内容作为我的模板之一：

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

在PHP中,我将插入此模板,然后将{content}的内容替换为另一个模板.在AngularJS中,我知道如何插入主模板(使用ng-view),但我不确定如何将我的“部分模板”动态加载到{content}标记中.这个假设是如何用AngularJS完成的？

一个简单的方法是使用 ngInclude directive：

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

然后,在与此模板关联的Controller中,您可以动态定义templatePath变量：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!