18

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

例如我有这个模板：

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

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

<script>

div应该包含模板的那个：

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

该模板位于文件夹中的某处/templates/test.php。是否有一种构建方式来像指令一样进行模板加载，并针对一些将替换密钥的数据进行编译{{Thumb}}（当然还有许多其他数据）？

编辑：如果我$routes在网站的根目录中使用并加载模板怎么办？怎么可能做到这一点？

4

3 回答 3

26

使用$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
    });
});

请注意，这是手动执行此操作的方式，而在大多数情况下，更可取的方式是定义使用该属性获取模板的指令。templateUrl

于 2015-04-19T22:51:19.240 回答
18

在 Angular 中有 2 种使用模板的方式（我知道至少有 2 种方式）：

  • 第一个使用具有以下语法的内联模板（在同一文件中）：

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

  • 第二个（你想要的）是外部模板：

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

所以你需要做的是从你的模板中删除脚本部分，然后在想要的 div 中使用 ng-include，如下所示：

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

需要有双引号和单引号才能工作。希望这可以帮助。

于 2013-02-09T13:17:09.227 回答
2

假设我有这个 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>

我有一个模板文件“tpl/ng.menu.tpl”，只有这 4 行：

<ul class="menu"> 
    <li><a href="#/view1">view1</a></li>
    <li><a href="#/view2">view2</a></li>
</ul>

我的指令映射“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'
    }
});
于 2013-03-18T03:03:43.820 回答