Angular загрузить шаблон из url и скомпилировать внутри div

Поскольку я новичок в Angular JS, мне было интересно, как я могу загрузить внешний шаблон и скомпилировать его с некоторыми данными в целевой div.

Например, у меня есть этот шаблон:

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

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

<script>

div, который должен содержать шаблон:

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

Шаблон находится где-то в папке /templates/test.php. Есть ли сборка для загрузки шаблона, как это сделала бы директива, и скомпилировать ее с некоторыми данными, которые заменили бы ключ {{Thumb}} (и многие другие, конечно)?

EDIT: Что делать, если я использую $routes и загружать шаблон, когда я в корне сайта? Как это можно достичь?

Ответы

Ответ 1

в Angular есть два способа использования шаблона (как минимум 2 способа, о которых я знаю):

первый, используя встроенный шаблон (в том же файле) с этим синтаксисом:
```
<script type="text/ng-template">
    <img ng-src="{{thumb}}">
</script>
```
второй (что вам нужно) - это внешний шаблон:
```
<img ng-src="{{thumb}}">
```

поэтому вам нужно удалить часть script из вашего шаблона, а затем использовать ng-include в нужном div следующим образом:

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

необходимо использовать двойные кавычки и одинарные кавычки. Надеюсь, это поможет.

Ответ 2

Используя $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 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
    });
});

Помните, что это ручной способ сделать это, и в большинстве случаев предпочтительным способом будет define a directive, который извлекает шаблон с помощью свойства templateUrl.

Ответ 3

Скажем, у меня есть этот 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'
    }
});