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>
相关推荐
本文主要探讨的是在处理包含HTML标签的数据时,如何利用`ng-bind-html`指令和`$sce`(Strict Contextual Escaping,严格上下文模式)服务来实现安全的数据绑定。 `ng-bind-html`指令通常用于将HTML字符串动态地绑定...
在引入`angular-sanitize.min.js`库后,`ng-bind-html`会使用`$sce`(Strict Contextual Escaping,严格的上下文逃逸服务)服务来检查和标记HTML内容为可信,然后安全地将其插入到页面中。 此外,你还可以通过创建...
在AngularJS中,ng-bind-html指令允许我们将HTML字符串绑定到模型变量,并将其内容插入到DOM中。本文将详细介绍ng-bind-html的用法,并强调在使用时的安全性处理。 ng-bind-html指令与ng-bind指令的主要区别在于,...
在AngularJS中,`ng-bind-html`指令是一个非常实用的功能,它允许我们将HTML字符串安全地绑定到DOM元素上,使得动态生成的HTML内容能够正确渲染。在本文中,我们将深入探讨`ng-bind-html`指令的工作原理、使用方法...
<div ng-bind-html="trustedHtml"></div> ``` 在控制器中,我们需要使用`$sce`服务(Strict Contextual Escaping)将HTML字符串标记为可信: ```javascript app.controller('MyCtrl', function($scope, $sce) { $...
在视图层,HTML代码中的`<div ng-bind-html="trustHtml"></div>`使用了`ng-bind-html`指令,它会根据`$sce`服务的信任度判断是否安全地渲染`trustHtml`变量中的HTML内容。这样,用户就能看到格式化的文章内容,而...
<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实现(当然,这...
总结来说,AngularJS通过SCE机制和`ng-bind`、`ng-bind-html`指令,为开发者提供了强大的工具来防止XSS攻击。正确使用这些工具可以确保用户输入的数据被安全地处理,同时保持页面的正常功能。记住,安全总是优于功能...
- `$sce.trustAsHtml(value)`:将HTML字符串标记为安全的,可以在`ng-bind-html`等指令中使用。 - `$sce.trustAsUrl(value)`:标记URL为安全的,可以用于`ng-href`或`src`属性。 - `$sce.trustAsResourceUrl(value)`...
在Angular.js框架中,数据绑定是一项核心特性,它允许开发者将模型数据与视图层进行交互,从而实现...通过合理使用`ng-bind-html`、$sanitize服务和$sce服务,我们可以确保在保证应用安全的同时,正确地显示HTML内容。
总结,Angular.js在下拉框中渲染HTML主要有三种方式:修改源码、使用`ng-bind-html`和自定义指令。其中,修改源码虽然快速但不安全;`ng-bind-html`是安全但可能导致性能问题;自定义指令则提供了更灵活和可控的解决...
2. 接着,我们可以使用 `ng-bind-html` 指令将这个可信任的HTML值输出到页面上: ```html <div ng-bind-html='aaa'></div> ``` 这种方法确保了Angular会将 `aaa` 变量中的HTML代码解析并渲染为实际的HTML元素,而...
使用`ng-bind`和`ng-bind-template`替代`{{}}`以避免未解析的显示,使用`ng-cloak`隐藏未渲染的表达式,使用`ng-non-bindable`阻止Angular解析特定内容,以及结合`ngSanitize`和`ng-bind-html`来安全地展示动态生成...
今天尝试用 Rails 做后端提供 JSON 格式的数据, AngularJS 做前端处理 JSON 数据,其中碰到 AngularJS 获取的是一段 HTML 文本,如果直接使用 data-ng-bind 的话是被转义过的,使用 data-ng-bind-html 则可以取消...
在AngularJS(Angular 1.x)中,`ng-bind-html`指令通常用于将HTML字符串安全地绑定到DOM中。Angular会自动编译和链接这些内容,但如果不正确处理,恶意代码可能会被注入,导致XSS攻击。为了避免这种情况,开发者...