javascript - 表格中自定义 html 标记的 Angular 指令

Question

我得到了一个解决方案，使用 AngularJS 指令让 html 将我的标记粗体理解为 html 标记b。因此<bold>{{testWorks}}</bold>，当我在范围内有 textWorks 时，会将文本设置为粗体。

{{testText}}但是，当我在范围内时它不起作用：$scope.testText = "<bold>Peter</bold>";

ng-bind-html当我使用让值被评估为 html时它也不起作用，您可以从Plunker找到代码

可能是在评估表达式之前应用了指令吗？

Answer 1

为了将一些 html 绑定到角度变量，您必须使用 $sce 模块来验证内容。

现场样本： http ://plnkr.co/edit/NBFsepObvv5IujigTosK?p=preview

.controller('myController', ['$scope', '$sce', function($scope, $sce) {
    $scope.testText = $sce.trustAsHtml("<bold>Peter</bold>");

}]);

Answer 2

You might have to change you controller to the followning

.controller('myController', ['$scope', '$sce', function($scope, $sce) {
      $scope.testWorks = 'John';
      $scope.testText = $sce.trustAsHtml("<bold>Peter</bold>");
      $scope.testTable = [$sce.trustAsHtml('<bold>A</bold>'), $sce.trustAsHtml('<bold>B</bold>'), $sce.trustAsHtml('<bold>C</bold>')];
    }]);

and you html to:

<tr>
    <td ng:repeat="data in testTable" ng-bind-html="data"> </td> 
</tr>

here is an example

Answer 3

感谢Polochon和rishal，我得到了它的工作$sce.trustAsHtml($compile("<bold>A</bold>")($scope).html()。你可以从这里找到它：Plunker