首页 > 技术文章 > AngularJs编辑器

zfdcp-028 2016-08-29 18:20 原文

问题:在使用过程中遇到的问题就是: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);

就可以得到纯文本了。

 

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

推荐阅读