将动态HTML链接到$ scope

Question

我正在使用Angular 1.4.8。我试图动态生成一个表，其中单元格的内容将从我的控制器中的变量中注入。

我在制作指令时使用$compile服务做了类似的事情，但$compile似乎无法在这里工作。

这是我尝试做的简化版本：

HTML

<div ng-controller="SimpleController">
    <div ng-bind-html="tableHtml"></div>
</div>

factory.js

var table = {
    title: "table title"
};

factory.buildHtml = function() {
    return "<div>{{ table.title }}</div>";
} 

factory.getTable = function() {
    return table;
};

controller.js

$scope.table = SimpleFactory.getTable();
$scope.tableHtml = $sce.trustAsHtml(SimpleFactory.buildHtml());
// also tried:
// $scope.tableHtml = $compile($sce.trustAsHtml(SimpleFactory.buildHtml()))($scope);
// and:
// $scope.tableHtml = $sce.trustAsHtml($compile(SimpleFactory.buildHtml())($scope));

html只输出文本{{table.title}}，这是可预测的，但我希望它链接到范围以从我的title变量中提取$scope.table属性（即我想要它写＆＃34;表标题＆＃34;）。有什么建议吗？

修改

我创建了一个plunkr来证明我的问题。

除了我的原始代码之外，我还将解决方案中的一些代码this question添加到我的plunkr中，以证明它不能按我希望的方式工作。我认为这是一个明显的问题：由于代码来自我工厂的变量，因此自定义指令无法识别，因为变量文本（例如"<div>{{ table.title }}</div>"或"<div dynamic='table.title'></div>"）不是＆＃39 ;在插入我的页面之前编译。

可能有一种方法可以制定解决我问题的指令，但这就是这个问题的目的，因为我不知道如何做到这一点。

编辑＃2

事实证明，这实际上是this question的副本，但我当时并不理解。

解决方案是添加上述问题答案中概述的指令，然后使用<div dyanmic="tableHtml"></div>而不是ng-bind-html显示数据。因此，正确的，有用的HTML页面如下：

HTML

<div ng-controller="SimpleController">
    <div dyanmic="tableHtml"></div>
</div>

这些修改也会保存在我制作的plunkr中。

Answer 1

实际上事实证明this question确实包含了答案。

我试图错误地插入数据。添加<div dynamic="tableHtml"></div>后，数据显示正确。