Javascript 自定义指令：如何使用动态HTML评估绑定

设置：

非常简化的HTML：

<td ng-repeat="col in cols">
    <div ng-bind-html="col.safeHTML"></div>
</td>

JS控制器：

$scope.cols = [
    {
      field       : 'logo',
      displayName : 'Logo',
      cellTemplate: '<div style="color:red">{{col}}</div>'
    },
    {
      field       : 'color',
      displayName : 'Color',
      cellTemplate: '<div style="color:green">{{col}}</div>
    }
  ];

$scope.cols=[
{
字段：“徽标”，
displayName:“徽标”，
cellTemplate:“{col}}”
},
{
字段：“颜色”，
displayName:'颜色'，
单元模板：'{col}}
}
];

JS link指令链接函数：

        for (var i = 0, j = $scope.cols.length;
               i < j;
               i++) {

            if ($scope.cols[i].hasOwnProperty('cellTemplate')) {
              $scope.cols[i].safeHTML = $sce.trustAsHtml($scope.cols[i].cellTemplate);
            }
          }

for（var i=0，j=$scope.cols.length；
i

它正确地转义HTML，但是绑定（

{{some_var}}

）没有被插入

---

如何在安全的HTML中计算绑定？我尝试使用了一些

bind

的变体，比如

ngbindmetplate

，但没有用：（

如果您计划动态编译角度组件并手动将它们添加到DOM中，您实际上想要使用该服务

通过一点自定义指令工作，您可以非常轻松地完成这项工作

函数compileDirective（$compile）{
返回{
限制：“A”，
链接：功能（范围、要素、属性）{
//注意表情的变化
作用域$watch（attrs.compile，函数（newVal）{
//Compile创建一个链接函数
//它可以用于任何范围
var link=$compile（newVal）；
//执行链接功能
//创建新元素
var newElem=链接（范围）；
//然后我们可以将其附加到DOM元素
附加元素（newElem）；
});
}
};
}
函数colscocontroller（）{
this.cols=[{
名称：“我正在使用H1”，
模板：“{col.name}}”
}, {
名称：“我使用的是一个红色的跨度”，
模板：“{col.name}}”
}];
}
角度模块（'sample'，[]））
.directive（'compile'，compileDirective）
.controller（'colsCtrl'，colscocontroller）；

不确定最佳做法，但是，

$parse

可能有用您在哪里填充属性“safeHTML”？我在您的example@AugustoBarreto抱歉，已在帖子中修复。@SmokeyHP

$parse

给了我一个错误，因为它不理解HTML（它会在第一次遇到错误时触发该错误）“@diosney-看看我的答案，看看你是如何做到这一点的。@diosney-哈！不，不是天才。这主要是对的改编。也就是说，我已经做了很多次测角，并且在很多场合使用了

$compile

服务来实现更高级的功能，比如说：）很高兴知道。顺便说一句，我刚刚通过了你的JS测试再次感谢，你节省了我几个小时：）我想我会花几分钟读你的博客，毕竟，我现在有空闲时间，哈哈哈。开玩笑吧，我忙得不可开交。很高兴有人能从中获益：）