AngularJs ng-bind-html指令整理

前端之家收集整理的这篇文章主要介绍了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>跳转到客户列表界面';
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()

猜你在找的Angularjs相关文章