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

  • Post author:
  • Post category:其他


前言

大家都知道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函数,直接对相应脚本进行替换,如下图:

6082d624573773c0dd079f876576bb54.png

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