Getting compiled html from template in AngularJS

Question

I must confess that it's not easy to find some basic and easy to understand guide about compiling templates in AngularJS. Here is the deal:

In my main html-page I have this:

<div>
    <div data-ng-include="'./views/testTemplate.html'"></div>
</div>
<div>
    <input type=button ng-click="func()" />
</div>

testTemplate.html contains this:

hello {{myname}}

Im my javascript-controller I have this:

$scope.myname = 'max';

Now, when I view the page I see the text "hello max".

Im my javascript-controller I also have this:

$scope.func = function(){
    var newScope = $scope.$new();
    var newElem = '<ng-src><div ng-include="\'./views/testTemplate.html\'" ></div></ng-src>';
    $compile(newElem)(newScope);
    console.log('newElem');
    console.log(newElem);
});

In the console I can see this:

newElem
<ng-src><div ng-include="'./views/testTemplate.html'" ></div></ng-src>

So, the template is not getting compiled? What am I missing?

***************EDIT***************

The thing is that Im trying to print to console the content of the new element because it needs to be mailed. So I need to send a mail with the compiled content from the template.

Having looked at the answers below, I now have this:

var newElem = '<ng-src><div ng-include="\'./views/testTemplate.html\'" ></div></ng-src>';
var compiledElem = $compile(newElem)(newScope);
console.log('compiledElem[0]');
console.log(compiledElem[0]);

If I use this:

$window.location.href = 'mailto:mailmail.com?subject=sub&body=' + compiledElem[0].innerHTML;

then the body of the mail contains this (uncompiled template):

<!-- ngInclude: './views/matching/testTemplate.html' -->

If I use this:

$window.location.href = 'mailto:mailmail.com?subject=sub&body=' + compiledElem[0];

then the body of the mail contains this:

[object HTMLElement]

So none of them is showing the html-content in the mail I want to send. I know its not exactly the original question, but it was a part of the issue.

Benjamin Schüller · Accepted Answer · 2017-09-05 13:29:03Z

1

I think the variable 'newElem' is not modified by the $compile command. It has a return value which you should use.

var compiledElement = $compile(newElem)(newScope);
console.log('compiledElement');
console.log(compiledElement);

answered Sep 5, 2017 at 13:29

Benjamin Schüller

2,2191 gold badge21 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

oderfla Over a year ago

Please could you have a look at the edited question?

Benjamin Schüller Over a year ago

Could you show what content is in the compiledElement variable? Is it a list of html objects? What content does the objects have?

oderfla Over a year ago

Actually it only contains a div with text in it. Im now beginning to think about if it is possible to make a call to "mailto" function and send to it an html page. This is probably another question. The best I could do now was to have a timeout in which the mailto-function gets the html() from the compiled code. However, in the body of the mail in my client I only see pure html-code. While I was actually looking for having the real html page in it.

Kstro21 · Accepted Answer · 2017-09-05 14:06:30Z

1

You are missing adding your HTML to the DOM.

$scope.func = function(){
    var newScope = $scope.$new();
    var newElem = '<ng-src><div ng-include="\'./views/testTemplate.html\'" ></div></ng-src>';

    //Append to DOM
    document.querySelector('#some-id').append($compile(newElem)(newScope));

    console.log('newElem');
    console.log(newElem);
});

In my example I'm using document.querySelector that is raw js. But we can use the $element service, or if we are in a directive's link function, it receives a param representing the current element where the directive is being applied.

EDIT:

If you want to send your compiled HTML in an email, then, you will need to wait until all the $digest finish to compile your template.

$scope.func = function(){
    var newScope = $scope.$new();
    var newElem = angular.element('<ng-src><div ng-include="\'./views/testTemplate.html\'" ></div></ng-src>');

    $compile(newElem)(newScope);

    $timeout(function(){

        $window.location.href = 'mailto:mailmail.com?subject=sub&body=' + newElem.html();

        //console.log('newElem');
        //console.log(newElem.html());
    });

});

Create your template using angular.element, use $timeout to wait until the end and then use newElem.html();.

edited Sep 5, 2017 at 14:06

answered Sep 5, 2017 at 13:31

Kstro21

7,84114 gold badges65 silver badges97 bronze badges

2 Comments

oderfla Over a year ago

Please could you have a look at the edited question?

Kstro21 Over a year ago

@oderfla see my edit, you need to wait until angular finish compiling your template.

Collectives™ on Stack Overflow

Getting compiled html from template in AngularJS

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related