从$ compile模板中获取HTML

Question

function ($scope,$compile) {
    $scope.word="Habrahabra"


var template = $compile("<p>{ { name } }</p>")
var templ = template({name: "Ivan"})
  document.getElementById("status").innerHTML =templ
}

在视图中我看到了

<p id="status">[[object HTMLParagraphElement]]</p> 

如何从对象模板获取字符串以附加到？

Answer 1

首先，您需要将真实$scope发送到link函数返回的$compile函数中 - 否则它将无法正常工作。您可以发送$scope来宣传您的name，也可以复制$rootScope或当前$scope，其中您将声明{{1}变量。

此外，要将元素附加到DOM，您可以使用name函数的第二个参数：

template()

回答您的问题 - 您可以致电template($scope, function (element, scope) { angular.element(document.getElementById("status")).append(element); }) 或templ.html()来接收字符串，但是您可以在角度引导并且templ[0].innerHTML完成工作后执行此操作，因此您必须执行此操作像$digest()这样的小哈克，时间间隔为0：

setTimeout()

参见简单示例：http://plnkr.co/edit/WcwRvjwYGuc87Rx3LhHX?p=preview

Answer 2

您可以尝试使用：

function Temp($scope,$compile) {
    var scope = $scope.$new(true);
    scope.name = "Ivan";
    var template = $compile("<p>{{ name }}</p>");
    var templ = template(scope);
    angular.element(document.querySelector('#status')).append(templ[0]);
}

Demo

由于您通常不想使用此编译模板的默认范围，因此可以使用：$scope.$new(true)创建隔离范围。

  

这里的关键是将true传递给$ new，它接受一个参数   isolate，避免从父级继承范围。    - Source

PS ：大括号var template = $compile("<p>{ { name } }</p>")之间的空格会导致编译问题。