angular load template from url and compile inside div

Question

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.

For instance I have this template :

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

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

<script>

The div that is supposed to contain the template :

<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 ) ?

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

Matt Taylor · Accepted Answer · 2015-05-29 18:46:05Z

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.

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 define a directive that fetches the template using the templateUrl property.

Derlin · Accepted Answer · 2017-09-05 12:22:33Z

18

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}}">
```

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.

edited Sep 5, 2017 at 12:22

Derlin

9,9212 gold badges34 silver badges57 bronze badges

answered Feb 9, 2013 at 13:17

Yahya KACEM

2,5018 gold badges34 silver badges63 bronze badges

6 Comments

Roland Over a year ago

It seems to be working. The {{Thumb}} will be only replaced with a value if I define an controller and I set the $scope.Thumb to a value. Also, I get a 404 for the {{Thumb}} image source, can that be avoided ?

Yahya KACEM Over a year ago

put an example on plnkr, so I can understand you better.

Roland Over a year ago

Well, take a look at the example they have : docs.angularjs.org/api/ng.directive:ngView ; I'm setting up the same thing right now, but I get redirected, probably because the route doesn't match the location I have ? I have it as $routeProvider.when('', { templateUrl : 'templates/vcard.php', controller : "VCardController" });

Yahya KACEM Over a year ago

Please, set an example code on plnkr, here's a plnkr about the $routes thing look at line 30 on the app.js file.

Valentyn Shybanov Over a year ago

For images you should use ngSrc: <img ng-src='Thumb'>

|

ggv · Accepted Answer · 2013-03-18 03:03:43Z

2

Let's say I have this 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:

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

My directives mapping "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'
    }
});

answered Mar 18, 2013 at 3:03

ggv

461 silver badge2 bronze badges

1 Comment

Sebastian Barth Over a year ago

Any idea why Angular sees only the content inside the <script> tags and not its loaded file content specified with the src attribute?

Collectives™ on Stack Overflow

angular load template from url and compile inside div

3 Answers 3

Comments

6 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related