angularjs sanitize+ng-bind-html内置指令做html标签转义

    之前对angularjs学习得还是不够深入，以至于自己忽略了angular-sanitize这个模块。还自己写了大量的正则表达式。但是后面发现，无论写再多的正则，也不能覆盖一些文本自带的html标签。无心插柳柳成荫。今天我莫名地去看了一下sanitize这个库的api。发现自己真他妈的傻。对于html标签的转义，原来直接采用sanitize才是最简单快捷的方法。顿感自己对angular框架的熟悉程度不够。

sanitize库是针对ng-bind-html这个内置指令去架设的，（如果直接使用，那么会报错unsafe...）普通的使用其实十分简单

以下是用例：

假设有那么一个single-page application，名叫App,数据早已WYSIWYG形式存在后台，假设存在一个key:content：

<div ng-app="App" ng-controller='ctrl'>

    <div ng-bind-html="words"></div>

</div>

//那么只要在使用ng-bind-html之前引入：

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

app.controller('ctrl',['$scope','$http',()=>{

    //发送post请求获取数据库的内容

    $http.post('api/getWords').then((res)=>{

      $scope.words =res.data[0].content

    })

}])

Tips:

我发现写入数据的时候“实体字符”不能存入数据库的。因此多少都要写几个正则表达式去处理一下这个问题。

效果图

后台的原始数据：

凌乱的WYSIWYG

注：不过这个方法有一个贼蛋疼的小毛病就是展示不了html源码。因为一碰到html源码会自动转义。不过已经好太多了。这个问题要解决也不难，只要将一段html源码封装成一段字符串就行了。这里就不展示了，大家自己动动脑筋。

学习是个不断尝试的过程，走了弯路都能学到其他的。不要紧。