深刻理解NG绑定HTML说明美元和SCE的服务在AngularJS

前言



一个AngularJS的长处在于他将数据绑定到牛B的功能。我们经常使用的两个东西是NG绑定和NG模型。

但在我们的项目中是这样的,在后端数据中有各种HTML标记。

如:


$scope.currentWork.description = Hello, where shall we go today


我们绑定的指令,如NG绑定HTML,但结果不是我们想要的。

那是真的。




你好,
我们今天要去哪里


我该怎么办

我们必须使用$ SCE服务与角1.2.the所谓SCE的版本解决问题是严格的语境逃逸的缩写。翻译成汉语是一个严格的上下文模型,它可以被理解为一种安全绑定。

让我们看看如何使用它。

控制器代码:


http.get美元( / / / API getworkid = + routeparams美元。作业标识号)。成功(功能(工作){ $ scope.currentwork =工作;});


HTML代码:


{ { } }描述当前的工作。


我们返回的内容包含了一系列的HTML标签。结果正如我们在文章开头说,在这个时候我们必须告诉它安全绑定。它可以通过sce.trustashtml美元用于(),该方法将值转换为特权和可以安全地使用ng-bind-html.so,我们介绍SCE美元服务到我们的控制器


控制器('transferworkstep2,{美元的范围,$ http ',' routeparams美元,美元的SCE,功能($美元范围,HTTP,routeparams美元美元,SCE){)
http.get美元( / / / API getworkid = + routeparams美元。作业标识号)
成功(函数(工作){)
scope.currentwork美元=工作;
scope.currentwork.description = $(美元sce.trustashtml rootscope美元。当前的工作描述);
});


HTML代码:





结果完美地呈现在页面上:


你好
我们今天要去哪里


我们也可以把它用作一个过滤器,可以随时在模板上调用。


app.filter('to_trusted,{ $ SCE功能($ SCE){)
返回函数(文本){
返回的sce.trustashtml(文本);
};
});


HTML代码:





总结



以上是关于NG绑定HTML指令内容美元和SCE的服务在AngularJS,希望能对大家的学习和工作带来一些帮助。如果有什么问题,你可以留言。