AngularJs ng-bind-html指令整理

来源：互联网发布：ie11不支持js 编辑：程序博客网时间：2024/05/01 07:05

一、使用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()

0 0