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

在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就可以执行监视，在内部数据结构中跟踪作用域的ID号，并访问根作用域

如本手册的“用法”部分所述：

退换商品

函数（作用域，cloneAttachFn=，选项=）

用于将模板（DOM元素/树）绑定到作用域的链接函数。其中：

• 范围-要绑定到的范围

因此，假设您可以访问

范围

参数，因为这可能在

链接

或

后链接

函数中：

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

---

当然，如果这不在指令中，或者如果您希望没有父作用域干扰，那么可以扩展

$rootScope

，但是在指令中，使用给定的作用域要正确得多。

我是否应该使用

$rootScope.$new

以编程方式创建一个新的作用域并将变量附加到它？如果您可以编辑您的文章并更正我的代码段，那将不胜感激。@Donal、$scope.$new（）或$rootScope.$new（），具体取决于您需要什么，并将变量附加到其中。像

let childScope=$scope.$new（）；childScope.var1='value1'；childScope.var2='value2'

@Dónal因为你没有告诉我们你在哪里创建或填充你的

htmlContentScope

，所以你没有给我任何我能纠正的东西！GProst创建的

childScope

和我想的一样，是一个很好的起点。@Dónal您有权从该函数访问根范围或任何其他范围对象吗？或者，如果您注入它，您可以吗？@JeffBowman是的，我可以注入

$rootScope

，因为此代码在指令中