Question

在Angular 1.4.7应用程序中，我想以编程方式编译HTML字符串，并将其传递给作用域。这个编译是在一个指令中执行的，我想把编译的结果附加到指令元素的子节点。

我目前正试图这样做：

 // htmlTemplate is a string of HTML that contains expressions,
 // directives, etc.
 var htmlContentScope = {foo: 'foo', bar: 'bar'};
 var compiledHtml = $compile(htmlTemplate)(htmlContentScope);
 var htmlContentTarget = $element.find('.html-content');
 htmlContentTarget.html(compiledHtml);

然而，这会导致以下错误

范围。$ new不是函数

可能原因是htmlContentScope是一个普通的JS对象，而不是Angular范围对象？

Answer 1

正确，您需要传入Angular Scope，而不是普通对象或哈希。这很重要，因此Angular可以强制执行监视，跟踪内部数据结构中作用域的ID号，以及访问根作用域。

与$compile docs：

的“使用情况”部分一样

返回

function(scope, cloneAttachFn=, options=)

一个链接函数，用于将模板（DOM元素/树）绑定到范围。其中：


范围 - 要绑定的Scope。

...

假设您有权访问scope参数，因为这可能出现在link或postLink函数中：

var htmlContentScope = scope.$new();
htmlContentScope.foo = 'foo';
htmlContentScope.bar = 'bar';
var compiledHtml = $compile(htmlTemplate)(htmlContentScope);
$element.find('.html-content').html(compiledHtml);

当然，如果这不在指令中，或者你想要一个没有父范围干扰的干净平板，你可以扩展$rootScope，但是在指令中使用范围要正确得多你得到了。

以编程方式编译模板并附加到元素

1 个答案:

返回