angular js的强大之处之一就是他的数据双向绑定这一牛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标记。表现出来的结果就如我们文章开头所说的那样。这时候我们必须告诉它安全绑定。它可以通过使用$ sce.trustAsHtml()。该方法将值转换为特权所接受并能安全地使用“ng-bind-html”。所以,我们必须在我们的控制器中引入$sce服务
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服务,对大家学习AngularJS具有一定参考借鉴价值,有需要都可以参考学习。
顾名思义,ng-bind-html和ng-bind的区别就是,ng-bind把值作为字符串,和元素的内容进行绑定,但是ng-bind-html把值作为html,和元素的html进行绑定.相当于jq里面的.text()和.html(). 但是,出于安全考虑,如果我们直接使用...
angular js的强大之处之一就是他的数据双向绑定这一牛B功能,我们会常常用到的两个东西就是ng-bind和针对form的ng-model。但在我们的项目当中会遇到这样的情况,后台返回的数据中带有各种各样的html标签.对于angular...
<div ng-bind-html=data></div> <div ng-bind-html=title></div> [removed] var m = angular.module('module', []); /*$sce服务写成过滤器*/ m.filter('trustHtml',['$sce',function($sce){ return ...
由用户通过ng-bind-html绑定任意HTML语句就是这方面的一个例子。我们称这些上下文转义为特权或者SCE。 二、$sce $sce 服务是AngularJs提供的一种严格上下文转义服务。 下面代码是简化了的ngBindHtml实现(当然,这...
今天尝试用 Rails 做后端提供 JSON 格式的数据, AngularJS 做前端处理 JSON 数据,其中碰到 AngularJS 获取的是一段 HTML 文本,如果直接使用 data-ng-bind 的话是被转义过的,使用 data-ng-bind-html 则可以取消...
通常angular绑定数据有这样的方法,{{}}或者ng-bind =”,此时数据为带有html标签的数据的话,那么就输出为带有标签的数据,不友好。 如何更改呢? 方法一 要输出为不带html的内容,需要两步 1 使用$sce.trustAsHtml...
├最新AngularJS开发宝典—第064讲 $sce服务安全的处理html数据.mp4 ├最新AngularJS开发宝典—第065讲 $cacheFactory的缓存实例讲解.mp4 ├最新AngularJS开发宝典—第066讲 $http服务获取后台数据.mp4 ├最新...
不知道大家有没有发现在用AngularJS作为前端搭建个人博客的时候,发现用AngularJs输出html的时候,浏览器并不解析这些html标签,这里我们需要其显示angular输出的html能被浏览器解析怎么办呢?不知道Angularjs如何...