Angularjs 在元素中插入一个有角度的js模板字符串

我试图在元素中放入一些有角度的js模板字符串，并期望得到一个符合要求的输出。但事实并非如此

HTML

<div ng-controller="testController">
    <div ng-bind-html-unsafe="fruitsView"></div>
</div>

控制器：

function filterController($scope){
    ...
    $scope.arr = ["APPLE", "BANANA"];
    $scope.fruitsView = '<div><p ng-repeat="each in arr">{{each}}</p></div>';
}

功能过滤器控制器（$scope）{
...
$scope.arr=[“苹果”、“香蕉”]；
$scope.fruitsView='
{{each}
'；
}

输出就是

{{each}

那么，如何在元素中插入一个有角度的js模板字符串（这里是

$scope.fruitsView

）

---

我对此做了一个解释。

在这种情况下，您不想只是“插入HTML”，而是要编译它。您可以使用

$compile

服务创建DOM节点

var tpl=$compile（'
{{each}}
'）（范围）；

如您所见，

$compile

返回一个函数，该函数将范围对象作为参数，并根据该参数计算代码。例如，可以使用

元素将结果内容插入DOM中。append（）

重要提示：但在任何情况下，任何与DOM相关的代码都不属于您的控制器。正确的地点总是一个指示。这段代码可以很容易地抛出到指令中，但我想知道为什么要以编程方式插入HTML

你能解释一下吗？这样我可以提供一个更具体的答案

更新

假设您的数据来自服务：

.factory（'myDataService'，函数（）{
返回函数（）{
//显然是$http
退货[“苹果”、“香蕉”、“橘子”]；
};
});

您的模板来自一个服务

.factory（'myTplService'，函数（）{
返回函数（）{
//显然是$http
返回“
{{item}
”；
};
});

然后创建一个简单的指令，读取提供的模板，对其进行编译，并将其添加到显示中：

指令（'showData'，函数（$compile）{ 返回{ 范围：正确， 链接：函数（范围、元素、属性）{ var-el； 属性$observe（‘模板’，功能（tpl）{ 如果（角度定义（tpl））{ //根据当前范围编译提供的模板 el=$compile（第三方物流）（范围）； //清空元素的愚蠢方式 html（“”）； //添加模板内容 元素。追加（el）； } }); } }; }); 那么在你看来,

显示内容

在控制器中，您只需将其连接在一起：

.controller（'MyCtrl'，函数（$scope，myDataService，myTplService）{
$scope.showContent=函数（）{
$scope.items=myDataService（）；//为什么要从控制器生成HTML？您能解决所有问题吗？我解决这个问题的用例：我正在使用第三方库（传单）在这里，我想插入一些对角度范围中的更改做出反应的控件。我想避免使用vanilla DOM API创建元素，并使用
$scope.$observe.
，因为这与注册普通事件侦听器基本相同。我想插入一个列表（在我的问题中是相同的列表模板）在页面中，当用户单击一个元素时。我们可以在不在控制器中执行dom操作的情况下处理这个用例吗？+rajkamal绝对可以！这样我可以用更具体的代码更新我的答案，单击的元素与插入内容的元素相同还是不同？我一直遇到这个错误：
error：使用
$compile
函数时需要参数“scope”。我发现我使用两个参数调用函数时出错，例如：
$compile（tpl，scope）；
并且完全不知道
$compile
是返回函数的函数，而应该像这样调用它：
$compile（tpl）（scope）
，这是你应该做的。如果其他人犯了这个错误，就发布这个。我看到了showData，但没有看到它在任何地方被使用。缺少什么？@jcollum它在视图中被使用；它是div上的“show data”属性。AngularJS指令在视图中是snake-case，在JavaScript中是camelCase。