从 MongoDB 中检索 HTML 用于 angular 项目

Question

我在我的项目中使用 summernote 编辑器，同时将内容存储为字符串，

var app = angular.module('myApp', []);

app.controller('indexController', function($scope){

$scope.data = [{
text:"<p><strong style=\"font-family: &quot;Open Sans&quot;, Arial, sans-serif; text-align: justify;\">Lorem Ipsum</strong><span style=\"font-family: &quot;Open Sans&quot;, Arial, sans-serif; text-align: justify;\">&nbsp;is simply dummy<i> <b>text of the printing</b></i> and <u>typesetting industry.</u> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span></p><ol><li><span style=\"font-family: &quot;Open Sans&quot;, Arial, sans-serif; text-align: justify;\">I</span>t has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</li><li>It has survived not only five<sup>fgfggfgfg.</sup></li><li>kjkjkjk<sub>jkjk</sub></li><li>ghgfhgfhgfhfghgfhfghgfhfghgfdhgjgj.</li></ol>"
},{
text:"<p><strong style=\"font-family: &quot;Open Sans&quot;, Arial, sans-serif; text-align: justify;\">Lorem Ipsum</strong><span style=\"font-family: &quot;Open Sans&quot;, Arial, sans-serif; text-align: justify;\">&nbsp;is simply dummy<i> <b>text of the printing</b></i> and <u>typesetting industry.</u> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span></p><ol><li><span style=\"font-family: &quot;Open Sans&quot;, Arial, sans-serif; text-align: justify;\">I</span>t has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</li><li>It has survived not only five<sup>fgfggfgfg.</sup></li><li>kjkjkjk<sub>jkjk</sub></li><li>ghgfhgfhgfhfghgfhfghgfhfghgfdhgjgj.</li></ol>"
} ]

});

.divClass{
margin-bottom: 40px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>

<div ng-app ="myApp" ng-controller="indexController">

<div ng-repeat="txt in data" class="divClass">{{txt.text}}</div>
</div>

我也尝试了 ng-bind-html 但它不起作用，请帮我解决这个问题。

Answer 1

使用 $sce.trustAsHtml 将字符串呈现为 html。确保将 $sce 注入控制器。

创建一个过滤器并在 html

中使用它

app.filter('render',function($sce){
      return function(html) {
         return $sce.trustAsHtml(html)
      }
})

在模板中使用 ng-bind-html

调用它

<div ng-repeat="txt in data" class="divClass">
      <div ng-bind-html="txt.text | render">

      </div>
</div>

演示

var app = angular.module('myApp', []);
app.filter('render',function($sce){
  return function(html) {
     return $sce.trustAsHtml(html)
  }
})
app.controller('indexController', function($scope, $sce){
$scope.data = [{
text:"<p><strong style=\"font-family: &quot;Open Sans&quot;, Arial, sans-serif; text-align: justify;\">Lorem Ipsum</strong><span style=\"font-family: &quot;Open Sans&quot;, Arial, sans-serif; text-align: justify;\">&nbsp;is simply dummy<i> <b>text of the printing</b></i> and <u>typesetting industry.</u> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span></p><ol><li><span style=\"font-family: &quot;Open Sans&quot;, Arial, sans-serif; text-align: justify;\">I</span>t has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</li><li>It has survived not only five<sup>fgfggfgfg.</sup></li><li>kjkjkjk<sub>jkjk</sub></li><li>ghgfhgfhgfhfghgfhfghgfhfghgfdhgjgj.</li></ol>"
},{
text:"<p><strong style=\"font-family: &quot;Open Sans&quot;, Arial, sans-serif; text-align: justify;\">Lorem Ipsum</strong><span style=\"font-family: &quot;Open Sans&quot;, Arial, sans-serif; text-align: justify;\">&nbsp;is simply dummy<i> <b>text of the printing</b></i> and <u>typesetting industry.</u> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span></p><ol><li><span style=\"font-family: &quot;Open Sans&quot;, Arial, sans-serif; text-align: justify;\">I</span>t has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</li><li>It has survived not only five<sup>fgfggfgfg.</sup></li><li>kjkjkjk<sub>jkjk</sub></li><li>ghgfhgfhgfhfghgfhfghgfhfghgfdhgjgj.</li></ol>"
} ]
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>

<div ng-app ="myApp" ng-controller="indexController">
 
<div ng-repeat="txt in data" class="divClass">
  <div ng-bind-html="txt.text | render">
  
  </div>
</div> 
</div>

从 MongoDB 中检索 HTML 用于 angular 项目

Retrieving HTML from MongoDB for use in angular project

html

mongodb

angularjs

summernote