javascript - 从 AngularJS 中的模板获取已编译的 html

Question

我必须承认，要找到一些关于在 AngularJS 中编译模板的基本且易于理解的指南并不容易。这是交易:

在我的主要 html 页面中，我有这个:

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

testTemplate.html 包含这个:

hello {{myname}}

我是我的 javascript Controller ，我有这个:

$scope.myname = 'max';  

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

我是我的 javascript-controller 我也有这个:

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

在控制台中我可以看到:

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

所以，模板没有被编译？我错过了什么？

***************编辑***************

问题是我正在尝试打印以控制新元素的内容，因为它需要邮寄。所以我需要发送一封邮件，其中包含模板中的编译内容。

看了下面的答案，我现在有了这个:

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]);

如果我使用这个:

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

然后邮件的正文包含这个(未编译的模板):

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

如果我使用这个:

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

然后邮件正文包含以下内容:

[object HTMLElement]

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

Answer 1

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

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