Question

我有一系列消息

$scope.messsages = []

单击按钮后，使用ng-click方法将文本区域的内容添加到数组中。此消息用于查询api。之后我们从服务器获得响应，该响应也被添加到数组$scope.messages中。所有这些消息都使用ng-repeat在html中显示，即： -

<div ng-repeat="msg in messages track by $index">
  {{ msg }}
</div>

但是，如果我从服务器获得响应，如

之类的超链接字符串

To know more <a href="URL">click here</a>。

在ng-repeat中显示的消息是一个没有超链接的纯字符串。它将<a href="URL">部分呈现为字符串本身。我想以html格式表示它。

它的一种工作方式是使用

document.getElementById("demo").innerHTML = $scope.messages;

但我想知道在ng-repeat部分本身是否有任何有角度的方式。

提前致谢

Answer 1

尝试像这样使用

<div ng-repeat="msg in messages track by $index">
    <div ng-bind-html="msg"></div>
</div>

以下是plunk示例。

Answer 2

在您的应用中包含ngSanitize模块，然后按以下方式更改您的视图

<div ng-repeat="msg in messages track by $index">
    <div ng-bind-html="msg"></div>
</div>

Answer 3

您应该使用ng-bind-html。所以你应该在你的ngSanitize注入app。

$scope.html = '<a href="#/Test">test</a>';
$scope.trustedHtml = $sce.trustAsHtml($scope.html);

＆＃13;

angular.module('myapp', ['ngSanitize'])
.controller('main', function($scope,$sce) {
   $scope.messages = [{"link":"<a href='#/abc'>abc</a>"}];

});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular-sanitize.min.js"></script>

<div ng-app="myapp" ng-controller="main">    
  <div ng-repeat="msg in messages">
      <div ng-bind-html="msg.link"></div>
  </div>
</div>

＆＃13;

通过angularjs ng-repeat传递href链接

3 个答案: