AngularJS ng-bind-html-unsafe替换（angular替换字符串）

25-01-30 23

针对AngularJSng-bind-html-unsafe替换和angular替换字符串这两个问题，本篇文章进行了详细的解答，同时本文还将给你拓展angularng-bind-html异常Attem

针对AngularJS ng-bind-html-unsafe替换和angular替换字符串这两个问题，本篇文章进行了详细的解答，同时本文还将给你拓展angular ng-bind-html异常Attempting to use an unsafe value in a safe context处理、AngularJS 1.2.0 ngBindHtml和trustAsHtml不能与ngModel一起使用、angularjs ng-bind-html 指令对html标签转译、AngularJS ng-bind-html 指令详解及实例代码等相关知识，希望可以帮助到你。

本文目录一览：

AngularJS ng-bind-html-unsafe替换（angular替换字符串）
angular ng-bind-html异常Attempting to use an unsafe value in a safe context处理
AngularJS 1.2.0 ngBindHtml和trustAsHtml不能与ngModel一起使用
angularjs ng-bind-html 指令对html标签转译
AngularJS ng-bind-html 指令详解及实例代码

AngularJS ng-bind-html-unsafe替换（angular替换字符串）

我曾经能够用来ng-bind-html-unsafe输出未经消毒的代码（因为消毒发生在服务器端）。

但是现在这个选择消失了吗？我知道我可以使用，$sce.trustAsHtml但是当不安全易于使用时，将其添加到整个JavaScript上将是一个巨大的痛苦。

我怎么不安全回来？

答案1

小编典典

好吧，仅创建您自己的指令非常简单，这是一个示例。

指令：

app.directive(''bindHtmlUnsafe'', function( $compile ) {    return function( $scope, $element, $attrs ) {        var compile = function( newHTML ) { // Create re-useable compile function            newHTML = $compile(newHTML)($scope); // Compile html            $element.html('''').append(newHTML); // Clear and append it        };        var htmlName = $attrs.bindHtmlUnsafe; // Get the name of the variable                                               // Where the HTML is stored        $scope.$watch(htmlName, function( newHTML ) { // Watch for changes to                                                       // the HTML            if(!newHTML) return;            compile(newHTML);   // Compile it        });    };});

用法：

<div bind-html-unsafe="testHTML"></div>

演示：
http：//jsfiddle.net/cC5VZ/2

angular ng-bind-html异常Attempting to use an unsafe value in a safe context处理

在angular中使用ng-data-html渲染dom时，遇到了一个Attempting to use an unsafe value in a safe context错误，官方给出的理由是‘试图在安全的上下文中使用不安全的值’。

导致此问题的实际原因是，返回数据中包含了html模板，angular会觉得在渲染数据中直接插入html不安全。

我们可以通过angular内置的$sce服务的trustAsHtml方法对不安全的数据添加信任。

看个例子：

HTML：

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <Meta charset="UTF-8">
    <Meta name="viewport" content="width=device-width,initial-scale=1.0">
    <Meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body ng-controller="myCtrl as vm">
    <ul>
        <li ng-repeat="item in vm.testData">
            <span ng-bind-html="item.text"></span>
        </li>
    </ul>
    <script src="modules/angular.js"></script>
    <script src="demo.js"></script>
</body>
</html>

JS:

angular.module(‘myApp‘,[])
    .controller(‘myCtrl‘,[‘$sce‘,function ($sce) {
        let vm = this;
        vm.testData = [{
                text: ‘<b>测试1</b>‘
            },{
                text: ‘<b>测试2</b>‘
            }
        ];
        vm.testData.forEach(ele => {
            ele.text = $sce.trustAsHtml(ele.text);
        });
    }]);

测试数据中的text包含了html，通过内置$sce.trustAsHtml()方法处理text数据即可解决此问题了。

AngularJS 1.2.0 ngBindHtml和trustAsHtml不能与ngModel一起使用

我觉得这应该很容易,因为我使用ngBind HtmlUnsafe与Angular 1.0.8完美配合.我在api文档和StackOverflow上阅读了我现在需要使用带有ngBindHtml的$sce.trustAsHtml(),但我似乎无法让它工作.

这基本上是我在阅读的内容中使用的格式：

var myApp = angular.module('myApp',[]);

function myController($scope,$sce){
    $scope.myHtml = $sce.trustAsHtml($scope.sourceText);
}

HTML：

<html ng-app="myApp">

  <head>
    <script data-require="angular.js@1.2.0-rc3" data-semver="1.2.0-rc3-nonmin" src="http://code.angularjs.org/1.2.0-rc.3/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-controller="myController">
      <textarea ng-model="sourceText"></textarea>

      <div ng-bind-html="myHtml"></div>
    </div>
  </body>

</html>

我认为这将是直截了当的,但我一定是错的,错过了一些东西.

我把这个简单的例子放到了Plunker：http://plnkr.co/edit/ZX4dONBlzv1X8BcO1IBV?p=preview

解决方法

这是你在找什么？
http://plnkr.co/edit/IZkzsuKHvbYiyV07CGqp

// would strongly suggest including sanitize in your scripts and injecting it
// into your app here to prevent "unsafe as safe" errors
var myApp = angular.module('myApp',['ngSanitize']);

myApp.controller('myController',['$scope','$sce',function myController($scope,$sce){
  $scope.myHtml = "initial";  //not needed,for testing

  $scope.changeText = function() {
    $scope.myHtml = $sce.trustAsHtml($scope.sourceText);
  }
}]);

HTML：

<head>
    <script data-require="angular.js@1.2.0-rc3" data-semver="1.2.0-rc3-nonmin" src="http://code.angularjs.org/1.2.0-rc.3/angular.js"></script>
    <script src="http://code.angularjs.org/1.2.0-rc.3/angular-sanitize.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-controller="myController">
      <textarea ng-model="sourceText" ng-change="changeText()"></textarea>

      <div ng-bind-html="myHtml"></div>
    </div>
  </body>

</html>

angularjs ng-bind-html 指令对html标签转译

文章参考

http://www.tuicool.com/articles/2eIrIz

http://www.runoob.com/angularjs/ng-ng-bind-html.html

在工作中遇到问题：用户在后台添加一篇新闻，在数据库中存储的是HTML代码，从数据库查询出来之后结果把HTML代码显示出来。

解决办法：使用ng-bind-html 指令，能够对HTML代码的标签转译，在浏览器中显示

ng-bind-html 指令会自动过滤掉标签内的样式？

所谓sce即“Strict Contextual Escaping”的缩写。翻译成中文就是“严格的上下文模式”也可以理解为安全绑定吧。

$sce干的事情来看就是将语境中存在的跨站攻击的风险给干掉.

我们返回的内容中包含一系列的html标记，它可以通过使用$sce.trustAsHtml()。该方法将值转换为特权所接受并能安全地使用“ng-bind-html”。所以，我们必须在我们的控制器中引入$sce服务.

代码如下

/** * 公司简介service * */ angular.module("hkApp").factory("companyIntroduceIndexCompanyService",["$http","$sce",function($http,$sce){ return { //获取公司简介 getCompanyIntroduce:function(__scope__){ var url = "/index.PHP/Admin/Page/companyPage.html"; var formData = { id:2 }; $http.post(url,formData) .success(function(response,status,headers,config){ if(response.status == 1){ //__scope__.content = response.data.content; __scope__.content = $sce.trustAsHtml(response.data.content); } }); } } }]);

【1】angular源码分析：angular中入境检察官$sce

【2】野兽的 Angular 学习 - -sce和sce和sceDelegate

【3】$sce官方手册

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

AngularJS ng-bind-html 指令

AngularJS 实例

绑定

内的 innerHTML 到变量 myText:

rush:js;"> <Meta charset="utf-8">

注意: 该实例包含了 "angular-sanitize.js" 文件,该文件移除 HTML 中的危险代码。

关于AngularJS ng-bind-html-unsafe替换和angular替换字符串的问题就给大家分享到这里，感谢你花时间阅读本站内容，更多关于angular ng-bind-html异常Attempting to use an unsafe value in a safe context处理、AngularJS 1.2.0 ngBindHtml和trustAsHtml不能与ngModel一起使用、angularjs ng-bind-html 指令对html标签转译、AngularJS ng-bind-html 指令详解及实例代码等相关知识的信息别忘了在本站进行查找喔。

本文标签：