`

angular中的ng-bind-html指令和$sce服务

阅读更多

        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>

 

文章来源:https://segmentfault.com/a/1190000000639561

分享到:
评论

相关推荐

    深入理解AngularJS中的ng-bind-html指令和$sce服务

    本文主要探讨的是在处理包含HTML标签的数据时,如何利用`ng-bind-html`指令和`$sce`(Strict Contextual Escaping,严格上下文模式)服务来实现安全的数据绑定。 `ng-bind-html`指令通常用于将HTML字符串动态地绑定...

    深入理解AngularJS中的ng-bind-html指令

    在引入`angular-sanitize.min.js`库后,`ng-bind-html`会使用`$sce`(Strict Contextual Escaping,严格的上下文逃逸服务)服务来检查和标记HTML内容为可信,然后安全地将其插入到页面中。 此外,你还可以通过创建...

    angularjs中ng-bind-html的用法总结

    在AngularJS中,ng-bind-html指令允许我们将HTML字符串绑定到模型变量,并将其内容插入到DOM中。本文将详细介绍ng-bind-html的用法,并强调在使用时的安全性处理。 ng-bind-html指令与ng-bind指令的主要区别在于,...

    AngularJS ng-bind-html 指令详解及实例代码

    在AngularJS中,`ng-bind-html`指令是一个非常实用的功能,它允许我们将HTML字符串安全地绑定到DOM元素上,使得动态生成的HTML内容能够正确渲染。在本文中,我们将深入探讨`ng-bind-html`指令的工作原理、使用方法...

    angular-ngSanitize模块-$sanitize服务详解

    &lt;div ng-bind-html="trustedHtml"&gt;&lt;/div&gt; ``` 在控制器中,我们需要使用`$sce`服务(Strict Contextual Escaping)将HTML字符串标记为可信: ```javascript app.controller('MyCtrl', function($scope, $sce) { $...

    详解angular用$sce服务来过滤HTML标签

    在视图层,HTML代码中的`&lt;div ng-bind-html="trustHtml"&gt;&lt;/div&gt;`使用了`ng-bind-html`指令,它会根据`$sce`服务的信任度判断是否安全地渲染`trustHtml`变量中的HTML内容。这样,用户就能看到格式化的文章内容,而...

    对angularJs中$sce服务安全显示html文本的实例

    &lt;div ng-bind-html=data&gt;&lt;/div&gt; &lt;div ng-bind-html=title&gt;&lt;/div&gt; [removed] var m = angular.module('module', []); /*$sce服务写成过滤器*/ m.filter('trustHtml',['$sce',function($sce){ return ...

    详解AngularJs中$sce与$sceDelegate上下文转义服务

    由用户通过ng-bind-html绑定任意HTML语句就是这方面的一个例子。我们称这些上下文转义为特权或者SCE。 二、$sce $sce 服务是AngularJs提供的一种严格上下文转义服务。 下面代码是简化了的ngBindHtml实现(当然,这...

    使用AngularJS中的SCE来防止XSS攻击的方法

    总结来说,AngularJS通过SCE机制和`ng-bind`、`ng-bind-html`指令,为开发者提供了强大的工具来防止XSS攻击。正确使用这些工具可以确保用户输入的数据被安全地处理,同时保持页面的正常功能。记住,安全总是优于功能...

    AngularJS 使用$sce控制代码安全检查

    - `$sce.trustAsHtml(value)`:将HTML字符串标记为安全的,可以在`ng-bind-html`等指令中使用。 - `$sce.trustAsUrl(value)`:标记URL为安全的,可以用于`ng-href`或`src`属性。 - `$sce.trustAsResourceUrl(value)`...

    详解Angular.js数据绑定时自动转义html标签及内容

    在Angular.js框架中,数据绑定是一项核心特性,它允许开发者将模型数据与视图层进行交互,从而实现...通过合理使用`ng-bind-html`、$sanitize服务和$sce服务,我们可以确保在保证应用安全的同时,正确地显示HTML内容。

    Angular.js中下拉框实现渲染html的方法

    总结,Angular.js在下拉框中渲染HTML主要有三种方式:修改源码、使用`ng-bind-html`和自定义指令。其中,修改源码虽然快速但不安全;`ng-bind-html`是安全但可能导致性能问题;自定义指令则提供了更灵活和可控的解决...

    angular将html代码输出为内容的实例

    2. 接着,我们可以使用 `ng-bind-html` 指令将这个可信任的HTML值输出到页面上: ```html &lt;div ng-bind-html='aaa'&gt;&lt;/div&gt; ``` 这种方法确保了Angular会将 `aaa` 变量中的HTML代码解析并渲染为实际的HTML元素,而...

    详解Angular的数据显示优化处理

    使用`ng-bind`和`ng-bind-template`替代`{{}}`以避免未解析的显示,使用`ng-cloak`隐藏未渲染的表达式,使用`ng-non-bindable`阻止Angular解析特定内容,以及结合`ngSanitize`和`ng-bind-html`来安全地展示动态生成...

    AngularJS中取消对HTML片段转义的方法例子

    今天尝试用 Rails 做后端提供 JSON 格式的数据, AngularJS 做前端处理 JSON 数据,其中碰到 AngularJS 获取的是一段 HTML 文本,如果直接使用 data-ng-bind 的话是被转义过的,使用 data-ng-bind-html 则可以取消...

    angular-todo-escape:不要使用这个! 这是假的

    在AngularJS(Angular 1.x)中,`ng-bind-html`指令通常用于将HTML字符串安全地绑定到DOM中。Angular会自动编译和链接这些内容,但如果不正确处理,恶意代码可能会被注入,导致XSS攻击。为了避免这种情况,开发者...

Global site tag (gtag.js) - Google Analytics