来自url的角度加载模板并在div内进行编译 [英] angular load template from url and compile inside div

问题描述

当我是Angular JS的新手时，我想知道如何加载外部模板并将其与一些数据一起编译到目标div中.

As I'm new to Angular JS I was wondering how could I load an external template and compile it with some data into the targeted div.

例如，我有这个模板:

<script type="text/ng-template">

    <img src="{{Thumb}}" />

<script>

应该包含模板的div:

<div data-ng-controller=" ... "></div>

模板位于文件夹/templates/test.php中的某个位置.

The template is located somewhere in a folder /templates/test.php. Is there a build in way of doing the template loading like a directive would do and compile it against some data that would replace the key {{Thumb}} ( and many others of course ) ?

如果我进入网站根目录时使用$routes并加载模板怎么办?如何实现?

EDIT : What if I use $routes and load a template when I'm in the root of the website ? How could that be achieved ?

推荐答案

在Angular中有2种使用模板的方式(至少我知道2种方式):

in Angular there's 2 ways of using template (at least 2 ways that i know about):

• 第一个使用具有以下语法的内联模板(在同一文件中):

• the first using an inline template (in the same file) with this syntax:

<script type="text/ng-template">
    <img ng-src="{{thumb}}">
</script>

第二个(您想要的)是外部模板:

the second one (what you want) is external template:

<img ng-src="{{thumb}}">

所以您需要做的是从模板中删除脚本部分，然后像这样在想要的div中使用ng-include:

so what you need to do is to remove the script part from your template and then use the ng-include in the wanted div like this:

<div ng-include="'templates/test.php'"></div>

需要有双引号和单引号才能工作. 希望这会有所帮助.

need to have double quotes and single quotes to work. Hope this helps.

这篇关于来自url的角度加载模板并在div内进行编译的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！