Question

我有一个角度片段，我想将字符串转换为HTML对象。

 `<div class="row">
     <label class="col-md-4 info_text">Remarks<span>:</span></label> <label
      class="col-md-8 fieldValue">{{initialTableInfo.comments}}
     </label>
    </div>`

initialTableInfo.comments的值为<b>someText</b>。它按原样打印。我想＆＃34; someText＆＃34;打印为 someText 而不是<b>someText</b>。

Answer 1

您可以将$ sce参数用于angular。

module.controller('myctrl', ['$scope', '$http', '$sce',function($scope, $http, $sce) {

$scope.initialTableInfo.comments = $sce.trustAsHtml("<b>Some Text<b>");

}]);

在您的HTML中使用 ng-bind-html

<label class="col-md-8 fieldValue" ng-bind-html="initialTableInfo.comment"> </label>

Answer 2

您可以使用$sce.trustAsHtml(html)将字符串渲染为html并使用 ng-bind-html.

<强>样本

＆＃13;

angular.module("app",[])
.controller("ctrl",function($scope){
$scope.initialTableInfo ={};
$scope.initialTableInfo.comments =  '<b>someText</b>';
})

.filter('trustHtml',function($sce){
  return function(html){
    return $sce.trustAsHtml(html)
  }
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
 <div class="background-white p20 reasons"  >
    <h6><b>About {{aboutlongs[0].name}}</b></h6>
    <div class="reason-content" ng-bind-html="$scope.initialTableInfo.comments | trustHtml" >
     
    </div>
</div>
</div>

＆＃13;

Answer 3

您应该查看此链接https://docs.angularjs.org/api/ng/directive/ngBindHtml。

<div ng-controller="ExampleController">
  <p ng-bind-html="myHTML"></p>
</div>

正如Alexi所说，一定要在控制器上使用正确的语法。

将String转换为标签AngularJS中的html

3 个答案: