Javascript 从 url 角度加载模板并在 div 内编译
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14788417/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
angular load template from url and compile inside div
提问by Roland
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.
由于我是 Angular JS 的新手，我想知道如何加载外部模板并将其与一些数据一起编译到目标div.
For instance I have this template :
例如我有这个模板：
<script type="text/ng-template">
<img src="{{Thumb}}" />
<script>
The divthat is supposed to contain the template :
该div所应该包含的模板：
<div data-ng-controller=" ... "></div>
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 ) ?
模板位于文件夹中的某处/templates/test.php。是否有像指令一样执行模板加载的构建方式，并针对某些将替换密钥的数据{{Thumb}}（当然还有许多其他数据）进行编译？
EDIT :What if I use $routesand load a template when I'm in the root of the website ? How could that be achieved ?
编辑：如果我$routes在网站的根目录中使用和加载模板怎么办？这怎么可能实现？
采纳答案by Yahya KACEM
in Angular there's 2 ways of using template (at least 2 ways that i know about):
在 Angular 中有 2 种使用模板的方法（我知道至少有 2 种方法）：
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}}">
第一个使用具有以下语法的内联模板（在同一文件中）：
<script type="text/ng-template"> <img ng-src="{{thumb}}"> </script>第二个（你想要的）是外部模板：
<img ng-src="{{thumb}}">
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：
<div ng-include="'templates/test.php'"></div>
<div ng-include="'templates/test.php'"></div>
need to have double quotes and single quotes to work. Hope this helps.
需要有双引号和单引号才能工作。希望这可以帮助。
回答by cdauth
Using $templateRequest, you can load a template by it's URL without having to embed it into your HTML page. If the template is already loaded, it will be taken from the cache.
使用$templateRequest，您可以通过其 URL 加载模板，而无需将其嵌入到您的 HTML 页面中。如果模板已经加载，它将从缓存中取出。
app.controller('testCtrl', function($scope, $templateRequest, $sce, $compile){
// Make sure that no bad URLs are fetched. If you have a static string like in this
// example, you might as well omit the $sce call.
var templateUrl = $sce.getTrustedResourceUrl('nameOfTemplate.html');
$templateRequest(templateUrl).then(function(template) {
// template is the HTML template as a string
// Let's put it into an HTML element and parse any directives and expressions
// in the code. (Note: This is just an example, modifying the DOM from within
// a controller is considered bad style.)
$compile($("#my-element").html(template).contents())($scope);
}, function() {
// An error has occurred here
});
});
Be aware that this is the manual way to do it, and whereas in most cases the preferable way would be to definea directivethat fetches the template using the templateUrlproperty.
回答by ggv
Let's say I have this index.html:
假设我有这个 index.html：
<!doctype html> <html lang="en" ng-app="myApp">
<body>
<script src="tpl/ng.menu.tpl" type="text/ng-template"></script>
<mainmenu></mainmenu>
<script src="lib/angular/angular.js"></script>
<script src="js/directives.js"></script>
</body>
</html>
And I have a template file "tpl/ng.menu.tpl" with only these 4 lines:
我有一个模板文件“tpl/ng.menu.tpl”，只有这 4 行：
<ul class="menu">
<li><a href="#/view1">view1</a></li>
<li><a href="#/view2">view2</a></li>
</ul>
My directives mapping "js/directives.js":
我的指令映射“js/directives.js”：
angular.module('myApp',['myApp.directives']);
var myModule = angular.module('myApp.directives', []);
myModule.directive('mainmenu', function() {
return {
restrict:'E',
replace:true,
templateUrl:'tpl/ng.menu.tpl'
}
});
