AngularJs编辑器

Posted 2020-08-04 绽放的菖蒲

问题：在使用过程中遇到的问题就是：angularJS绑定不上值。后来找到一种可以用的方式。

html页

1  <div class="all">
2                 <script type="text/html" style="margin:auto;height:300px;width:100%;" ng-model="LogContent" meta-umeditor
3                         meta-umeditor-config=‘all_config‘
4                         meta-umeditor-placeholder="请填写日志内容！">
5                 </script>
6             </div>

controller里要初始化

 1 $scope.LogContent = ""; 2 $scope.all_config = {}; 

脚本引用

<link href="http://dylike.github.io/meta.umeditor/bower_components/meta.umeditor/lib/umeditor/dist/utf8-php/themes/default/css/umeditor.css"
      type="text/css" rel="stylesheet">
<script src="http://dylike.github.io/meta.umeditor/bower_components/meta.umeditor/lib/umeditor/dist/utf8-php/third-party/jquery.min.js"></script>
<script src="http://dylike.github.io/meta.umeditor/bower_components/meta.umeditor/lib/umeditor/dist/utf8-php/umeditor.min.js"></script>
<script src="http://dylike.github.io/meta.umeditor/bower_components/meta.umeditor/lib/umeditor/dist/utf8-php/umeditor.config.js"></script>
<script src="http://dylike.github.io/meta.umeditor/bower_components/meta.umeditor/src/meta.umeditor.js"></script>

这样就可以用了。

【问题描述】

这时取到的数据中带有各种各样的html标签，angularJs输出html的时候，浏览器并不解析这些html标签

我们用ng-bind-html这样的指令来绑定，浏览器中显示的还是html代码。

【解决办法---$sce】

通过使用$ sce.trustAsHtml()。该方法将值转换为特权所接受并能安全地使用“ng-bind-html”

要这样设置一下logList[i].LogContent = $sce.trustAsHtml(logList[i].LogContent);

就可以得到纯文本了。

 

注：仅个人理解和总结，有误处请各位指正