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';

现在，当我查看页面时，我看到文字＆＃34; hello max＆＃34;。

我的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>

那么，模板是不是被编译了？我错过了什么？

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

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

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

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'。它有一个你应该使用的返回值。

.catch()

Answer 2

您遗失了将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);
});

在我的示例中，我使用的是原始document.querySelector的{{1}}。但是我们可以使用js服务，或者如果我们在一个指令的$element函数中，它会收到一个代表当前应用该指令的元素的参数。

修改

如果要在电子邮件中发送已编译的link，则需要等到所有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()); }); });创建模板，使用angular.element等到结束，然后使用$timeout。

从AngularJS中的模板获取编译的html

2 个答案: