Question

我想在引导程序表中显示一些文本。由于我需要<br/> - 标签来显示彼此之下的所有不同链接，因此文本应该被解析为HTML。请参阅我的代码this Plunker 正如您所看到的，我使用了默认的ng-bind指令以及已弃用的ng-bind-html，但文本显示为纯文本或根本不显示。
你们能告诉我如何显示解析为HTML的文本吗？

这是我的HTML表的代码：

<table class="table">
  <thead>
    <tr>
      <th>Method</th>
      <th>$scope.other</th>
      <th>$scope.links</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>ng-bind</td>
      <td>{{other}}</td>
      <td>{{links}}</td>
    </tr>
    <tr>
      <td>ng-bind-html</td>
      <td ng-bind-html="other"></td>
      <td ng-bind-html="links"></td>
    </tr>
  </tbody>
</table>

匹配控制器：

app.controller('TestController', function($scope){
  $scope.links = 'https://www.google.com <br/> https://angularjs.org/ <br/> \
                   https://www.google.com <br/> https://angularjs.org/ <br/> \
                   https://www.google.com <br/> https://angularjs.org/ <br/>';

  $scope.other = "sample Text";
});

Answer 1

默认情况下，注入模板的HTML不安全，您必须将其标记为受信任。

app.controller('TestController', function($scope, $sce){
    $scope.links = $sce.trustAsHtml('https://www.google.com <br/> https://angularjs.org/ <br/> \
               https://www.google.com <br/> https://angularjs.org/ <br/> \
               https://www.google.com <br/> https://angularjs.org/ <br/>');

    $scope.other = "sample Text";
});

您是否需要直接注入HTML？您可以拥有链接的地图/列表，并使用ng-repeat在模板中呈现它们。

Answer 2

你需要使用Sanitize模块：https://docs.angularjs.org/api/ngSanitize/service/ $ sanitize

app.controller('TestController', function($scope, $sce){
  $scope.links = $sce.trustAsHtml('https://www.google.com <br/> https://angularjs.org/ <br/> \
               https://www.google.com <br/> https://angularjs.org/ <br/> \
               https://www.google.com <br/> https://angularjs.org/ <br/>');

  $scope.other = "sample Text";
});

Answer 3

您可以将ng-bind-html和ng-bind-html-unsafe用于此目的。

示例显示为here

AngularJS在bootstrap表中将文本解析为HTML

3 个答案: