angular渲染原生html,Angular.js中下拉框实现渲染html的方法

前言

大家都知道angualrjs处于安全的考虑，插值 指令会对相应字符串进行过滤，避免出现html攻击。但是在一些时候，我们需要渲染html，比如实现一个分级的下拉框

代码如下：

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

app.controller("controller",["$scope",function ($scope) {

var testList=[{id:0,text:"  全国"},{id:1,text:" 北京"},{id:20,text:"   上海"},{id:3,text:"  福建"},{id:4,text:"  山东"}];

$scope.value=20;

$scope.testList=testList;

}]);

可以看到，空格直接被渲染为  。一个简单粗暴的解决办法是修改angularjs源代码，不再对html进行过滤，在angularjs源码中搜索updateOptions函数，直接对相应脚本进行替换，如下图：

可以看到，空格已经被正确的渲染，这种方式虽然简单，但是修改将会影响到所有的下拉框控件，有可能会受到html攻击，一种比较中规中矩的办法是采用n