这里有新鲜出炉的 AngularJS 教程,程序狗速度看过来!
AngularJS 诞生于 Google 是一款优秀的前端 JS 框架,已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入,等等。
这篇文章给大家详细介绍了 AngularJS 中的 ng-bind-html 指令和 $sce 服务,对大家学习 AngularJS 具有一定参考借鉴价值,有需要都可以参考学习。
前言
Angularjs 的强大之处之一就是他的数据双向绑定这一牛 B 功能,我们会常常用到的两个东西就是 ng-bind 和针对 form 的 ng-model。
但在我们的项目当中会遇到这样的情况,后台返回的数据中带有各种各样的 html 标签。
如:
- $scope.currentWork.description = "hello,
- <br > <b > 今天我们去哪里? < /b>"/
我们用 ng-bind-html 这样的指令来绑定,结果却不是我们想要的。
是这样的
- hello,
- 今天我们去哪里?
怎么办呢?
对于 angular 1.2 一下的版本我们必须要使用 $sce 这个服务来解决我们的问题。所谓 sce 即 "Strict Contextual Escaping" 的缩写。翻译成中文就是 "严格的上下文模式" 也可以理解为安全绑定吧。
来看看怎么用吧。
controller code:
- $http.get('/api/work/get?workId=' + $routeParams.workId).success(function(work) {
- $scope.currentWork = work;
- });
HTML code:
- <p>
- {{currentWork.description}}
- </p>
我们返回的内容中包含一系列的 html 标记。表现出来的结果就如我们文章开头所说的那样。这时候我们必须告诉它安全绑定。它可以通过使用
。该方法将值转换为特权所接受并能安全地使用 "ng-bind-html"。所以,我们必须在我们的控制器中引入 $sce 服务
- $ sce.trustAsHtml()
- controller('transferWorkStep2', ['$scope','$http','$routeParams','$sce', function ($scope,$http, $routeParams, $sce) {
- $http.get('/api/work/get?workId=' + $routeParams.workId)
- .success(function (work) {
- $scope.currentWork = work;
- $scope.currentWork.description = $sce.trustAsHtml($rootScope.currentWork.description);
- });
html code:
- <p ng-bind-html="currentWork.description">
- </p>
这样结果就完美的呈现在页面上了:
- hello
- 今天我们去哪里?
咱们还可以这样用,把它封装成一个过滤器就可以在模板上随时调用了
- app.filter('to_trusted', ['$sce',
- function($sce) {
- return function(text) {
- return $sce.trustAsHtml(text);
- };
- }]);
html code:
- <p ng-bind-html="currentWork.description | to_trusted">
- </p>
总结
以上就是关于 AngularJS 中的 ng-bind-html 指令和 $sce 服务的全部内容了,希望对大家的学习或者工作带来一定的帮助,如果有问题可以留言交流。
来源: http://www.phperz.com/article/17/0508/332004.html