AngularJs ng-bind-html指令整理

r囧r小猫 2022-07-10 12:59 163阅读 0赞

**一、使用angular-santize.js**

var app = angular.module("myApp", ['ngSanitize']);
    app.controller("myCtrl", function($scope) {
        $scope.myText = "My name is: <h1>John Doe</h1>";
    });

**ng-bind-html** 指令是通一个安全的方式将内容绑定到 HTML 元素上。

当你想让 AngularJS 在你的应用中写入 HTML，你就需要去检测一些危险代码。通过在应用中引入 "angular-santize.js" 模块，使用 ngSanitize 函数来检测代码的安全性。 in your application you can do so by running the HTML code through the ngSanitize function.

特别说明：这种方式可以过滤一些危险代码，但同时也取消了很多样式内容，不推荐使用

**二、使用$sce.trustAsHtml()**

$scope.uploadInfo = $sce.trustAsHtml('上传成功！<a ng-click="'+ "quitTo('customer')"+ '">点击</a>跳转到客户列表界面'); //$scope.$apply();

![Center][]

特别说明：这种方式对于AngularJs中的默认指令不支持解析，一般绑定文章内容（推荐使用）。

**三、使用$comiple()**

var uploadInfo = '上传成功！<a ng-click="'+ "quitTo('customer')"+ '">点击</a>跳转到客户列表界面'; var ele = $compile(uploadInfo)($scope); angular.element('.modal-body').append(ele);

特别说明：这种方式可以解析指令。

[AngularJS阻止事件冒泡$event.stopPropagation()][AngularJS_event.stopPropagation]

[angularjs unsafe ng-href using javascript: void(0);][angularjs unsafe ng-href using javascript_ void_0]

[AngularJs constant()和value()][AngularJs constant_value]

[Center]: /images/20220710/1f8f65fe45ea4344acdcb85d32ddae5f.png
[AngularJS_event.stopPropagation]: http://blog.csdn.net/u011127019/article/details/54970308
[angularjs unsafe ng-href using javascript_ void_0]: http://blog.csdn.net/u011127019/article/details/55517989
[AngularJs constant_value]: http://blog.csdn.net/u011127019/article/details/54970424