AngularJs ng-bind-html指令整理

一、使用angular-santize.js

<div ng-app="myApp" ng-controller="myCtrl">
    <p ng-bind-html="myText"></p>
</div>

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()

<div class="modal-content">
    <div class="modal-body" ng-bind-html="uploadInfo">
    </div>
</div>

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

特别说明：这种方式对于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 unsafe ng-href using javascript: void(0);

AngularJs constant()和value()