使用AngularJS从模板中编译html

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:

我必须承认，找到一些基本的、易于理解的关于AngularJS模板编译的指南是不容易的。情况是这样的:

In my main html-page I have this:

在我的html主页上，我有:

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

testTemplate.html contains this:

testTemplate。html包含:

hello {{myname}}

Im my javascript-controller I have this:

我的javascript控制器:

$scope.myname = 'max';

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

现在，当我查看页面时，我看到文本“hello max”。

Im my javascript-controller I also have this:

我的javascript控制器也有:

$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.

所以它们都没有在我要发送的邮件中显示html内容。我知道这不是最初的问题，但这是问题的一部分。

2 个解决方案

#1

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

我认为变量newElem没有被$compile命令修改。它有一个返回值，您应该使用它。

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

#2

You are missing adding your HTML to the DOM.

您缺少将HTML添加到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.

在我的例子中，我使用的是文档。是原始js的querySelector。但是我们可以使用$element服务，或者如果我们在一个指令的链接函数中，它会接收一个表示当前执行该指令的元素的参数。

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.

如果您想在电子邮件中发送已编译的HTML，那么您需要等到所有的$digest完成后才能编译模板。

$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();.

使用角度创建模板。元素，使用$timeout等待直到结束，然后使用newelement .html();。

#1