Question

我正在创建一个angularjs页面，其中html内容从数据库中获取并显示在html页面上。

{{ mlcontent }}
<div ng-bind-html="'{{ mlcontent }}' | trust"></div>

在上面的代码片段中，第一行内容正在从数据库中填充。但在第二行中， mlcontent 值为空白。

为了测试ng-bind-html，我传递了如下的硬编码值，它按预期工作。 <div ng-bind-html="'<li> Some value</li> | trust"></div>

添加：trust是一个过滤器，用于在页面上接收html数据

app.filter("trust", ['$sce', function($sce) {
  return function(htmlCode){
        console.log("htmlCode"+ htmlCode + "\n"+ $sce.trustAsHtml(htmlCode));
        return $sce.trustAsHtml(htmlCode);
  }
}]);

 **SOLUTION:
    <div ng-bind-html="mlcontent' | trust">**

Answer 1

您不需要使用$sce，您可以在ngSanitize模块的帮助下执行此操作。

对于ngSanitize模块，您必须添加以下angularjs库，

https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-sanitize.min.js

＆＃13;

var app = angular.module('app', ['ngSanitize']);

app.controller('TestController', function($scope) {
  $scope.mlcontent = '<li> Some value</li>';
});

angular.bootstrap(document, ['app']);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-sanitize.min.js"></script>
<div ng-controller="TestController">
  <div ng-bind-html="mlcontent"></div>
</div>

＆＃13;

通过控制器传入ng-bind-html后，值变为空白

1 个答案: