代码之家 › 专栏 › 技术社区 › Santhoshkumar

从MongoDB检索HTML以用于angular项目

summernote mongodb angularjs html

Santhoshkumar · 技术社区 · 7 年前

我在项目中使用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绑定html 另外,但它不工作,请帮助我解决这个问题。

1 回复 | 直到 7 年前

Sachila Ranawaka 7 年前

使用 $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>