前言

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

代码如下：

body ng-app=' app ' ng-controller=' controller '选择ng-model=' value ' ng-options=' t . test list中t的文本'/选择脚本src=' http :/bootstrap/bootstrap/dist/angular-bootstrap/angular。js '/script脚本类型=' text/JavaScript ' var app=angular。模块(' 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源代码，不再对超文本标记语言进行过滤，在angularjs源码中搜索更新选项函数，直接对相应脚本进行替换，如下图：

可以看到，空格已经被正确的渲染，这种方式虽然简单，但是修改将会影响到所有的下拉框控件，有可能会受到超文本标记语言攻击，一种比较中规中矩的办法是采用ng-绑定-html来渲染html，这个时候下拉框绑定数据的方式也需要改变，相应代码如下：

body ng-app=' app ' ng-controller=' controller '选择ng-module=' value '选项ng-repeat=' testList '中的数据value=' { { data。id } }“ng-selected=”数据。id=' value ' ng-bind-html=' data。text '/option/select script src=' http :/bootstrap/bootstrap/dist/angular-bootstrap/angular。js '/script脚本类型=' text/JavaScript ' var app=angular。模块(' app '，[])app.controller('controller '，['$scope '，' $sce '，函数($scope，$sce) { var testList=[{id:0，text: '全国}，{id:1，text: '北京}，{id:20，text: '上海}，{id:3，text: '福建}，{id:4，text: '山东'}];for(var I=0；itestList.lengthi ) { testList[i].text=$ SCE。trustashtml(TestList[I]).文本);} $ scope.value=' 20//注意，此处必须为字符串类型，否则无法获取选中的值$ scope . testList=testList }])；/脚本/正文这种方式非常消耗性能，对于数据量不大的下拉框，这种方式完全可以满足需要，但是如果数据量稍微大些，浏览器就会出现明显的卡顿现象，这个时候可以自己写一个指令来实现下拉框，代码如下：

车身ng-app=' app ' ng-控制器='控制器'下拉列表d-list=' testList '值=' id ' text=' text ' d-select-value=' value '/下拉列表{ { value } }脚本src=' http :/bootstrap/bootstrap/dist/angular-bootstrap/angular。js '/script脚本类型=' text/JavaScript ' var app=angular。模块(' app '，[])；app.controller('controller '，['$scope '，' $window '，function ($scope，$ window){ var testList=[{ id :0，text: '全国}，{id:1，text: '北京}，{id:20，text: '上海}，{id:3，text: '福建}，{id:4，text: '山东'}];$ scope . value=20 $ scope . testList=testList }])；app.directive('dropDownList '，function(){ return { restrict : ' E '，scope :{ dList:'='，dSelectValue:'=' }，link:function(scope，element，attrs){ var d=document；定义变量值=attrs[' value ']；//对应选择权的value var text=attrs[' text ']；var selectValue=作用域。dselectvalueelement.on('change '，function(){ var selectedIndex=this。selectedIndex范围$ apply(function(){ scope。dselectvalue=selectedIndex});})为(var I=0；是应付。dlist。长度；I){ var option=d .创建元素(' option ')；选项。值=范围。dlist[I][value]；选项。innerhtml=作用域。DList[I][text]；if(SelectValue==选项。value){ option。SetAttribute(' selected '，true)；} element.append(选项);} }，template:'select/select '，替换： true }；});/脚本/正文这种方式可以比较完美的实现相应功能，是一种较好的选择。

摘要

以上就是本文的全部内容。希望本文的内容能给你的学习或工作带来一些帮助。有问题可以留言交流。谢谢你的支持。