使用ng-bind-html和$ sce.trustAsHtml创建具有ng-model绑定的字符串（使用new创建对象之外,还可以用_________方法创建对象）

25-02-19 12

以上就是给各位分享使用ng-bind-html和$sce.trustAsHtml创建具有ng-model绑定的字符串，其中也会对使用new创建对象之外,还可以用_________方法创建对象进行解释，

以上就是给各位分享使用ng-bind-html和$ sce.trustAsHtml创建具有ng-model绑定的字符串，其中也会对使用new创建对象之外,还可以用_________方法创建对象进行解释，同时本文还将给你拓展$ sce.trustAsHtml中的呈现指令、Android的Html.escapeHtml和TextUtils.htmlEncode有什么区别？我什么时候应该使用其中一种？、Angular js中$ sce.trustAsHtml（）字符串中的调用函数、AngularJS 1.2.0 ngBindHtml和trustAsHtml不能与ngModel一起使用等相关知识，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

使用ng-bind-html和$ sce.trustAsHtml创建具有ng-model绑定的字符串（使用new创建对象之外,还可以用_________方法创建对象）
$ sce.trustAsHtml中的呈现指令
Android的Html.escapeHtml和TextUtils.htmlEncode有什么区别？我什么时候应该使用其中一种？
Angular js中$ sce.trustAsHtml（）字符串中的调用函数
AngularJS 1.2.0 ngBindHtml和trustAsHtml不能与ngModel一起使用

使用ng-bind-html和$ sce.trustAsHtml创建具有ng-model绑定的字符串（使用new创建对象之外,还可以用_________方法创建对象）

我想动态创建表单。在控制器内部，我创建了一个字符串

var str = "<input type=''text'' value=''" + $scope.selectedData.code + "''form-control'' />";$scope.htmlString = $sce.trustAsHtml(str);

并在我的html页面中

<div ng-bind-html="htmlString"></div>

我得到的价值，但没有约束力。我也尝试

var str = "<input type=''text'' ng-model=''" + $scope.selectedData.code + "''form-control'' />";$scope.htmlString = $sce.trustAsHtml(str);

也行不通。谁能知道这怎么工作？

答案1

小编典典

HTML：

添加指令： compile-template

<div ng-bind-html="htmlString" compile-template></div>

JS：

angular.module(''ngApp'', [''ngSanitize'']).controller(''controller1'', [''$scope'',''$sce'', function($scope, $sce) {    var str = "<input type=''text'' ng-model=''" + $scope.selectedData.code + "''form-control'' />";    $scope.htmlString = $sce.trustAsHtml(str);}]).directive(''compileTemplate'', function($compile, $parse){    return {        link: function(scope, element, attr){            var parsed = $parse(attr.ngBindHtml);            function getStringValue() {                return (parsed(scope) || '''').toString();            }            // Recompile if the template changes            scope.$watch(getStringValue, function() {                $compile(element, null, -9999)(scope);  // The -9999 makes it skip directives so that we do not recompile ourselves            });        }    }});

$ sce.trustAsHtml中的呈现指令

我在此处加入了一个Plunker：http
://plnkr.co/edit/4vqV8toHo0vNjtfICtzI?p=preview

我正在尝试向DOM添加一个按钮，单击该按钮应执行绑定到它的功能。在这种情况下，它应该警告“测试”。这是代码。

控制者

app.controller('MainCtrl',function($scope,$sce) {
        $scope.trustedHtml = $sce.trustAsHtml('<button ng-click="testAlert()">Submit</button>');

        $scope.testAlert = function () {
            alert('testing')
        };
});

的HTML

<body ng-controller="MainCtrl">
    <div ng-bind-html="trustedHtml"></div>
</body>

Android的Html.escapeHtml和TextUtils.htmlEncode有什么区别？我什么时候应该使用其中一种？

Android有两种不同的方法来转义/编码Strings中的HTML字符/实体：

> Html.escapeHtml(String),在API 16(Android 4.1)中添加.文档说：

Returns an HTML escaped representation of the given plain text.

> TextUtils.htmlEncode(String)对于这一个,文件说：

Html-encode the string.

阅读文档,他们似乎都做了几乎相同的事情,但是,在测试它们时,我得到一些非常神秘(对我而言)的输出.

例如.使用输入：< p>这是一个引号“.这是一个欧元符号：€.< b>这是一些粗体文本< / b>< / p>

> Html.escapeHtml给出：

&lt;p&gt;This is a quote ". This is a euro symbol: &#8364;. &lt;b&gt;This is some bold text&lt;/b&gt;&lt;/p&gt;@H_301_21@ 
 >而TextUtils.htmlEncode给出： 
  
 &lt;p&gt;This is a quote &quot;. This is a euro symbol: €. &lt;b&gt;This is some bold text&lt;/b&gt;&lt;/p&gt;@H_301_21@ 
 所以似乎第二个转义/编码引号(“),但第一个没有,虽然第一个编码欧元符号,但第二个没有.我很困惑. 
 那么这两种方法有什么区别呢？每个转义/编码的字符是什么？编码和转义之间的区别是什么？我什么时候应该使用其中一种(或者我应该喘气,一起使用它们？)？

解决方法

您可以比较他们的来源：

这就是Html.escapeHtml在下面使用的内容：

https://github.com/android/platform_frameworks_base/blob/d59921149bb5948ffbcb9a9e832e9ac1538e05a0/core/java/android/text/Html.java#L387

这是TextUtils.htmlEncode：

https://github.com/android/platform_frameworks_base/blob/d59921149bb5948ffbcb9a9e832e9ac1538e05a0/core/java/android/text/TextUtils.java#L1361

如您所见,后者仅引用为HTML中的标记保留的某些字符,而前者也编码非ASCII字符,因此它们可以用ASCII表示.

因此,如果您的输入只包含拉丁字符(现在通常不太可能),或者您已在HTML页面中正确设置了Unicode,并且可以使用TextUtils.htmlEncode.然而,如果您需要确保您的文本即使通过7位通道传输也能正常工作,请使用Html.escapeHtml.

至于引号字符(“)的不同处理 – 它只需要在属性值内转义(见the spec),所以如果你没有把你的文本放在那里,你应该没问题.

因此,我个人的选择是Html.escapeHtml,因为它似乎更通用.

Angular js中$ sce.trustAsHtml（）字符串中的调用函数

我正在使用Angularjs开发应用程序，并在页面中添加HTML使用$sce.trustAsHtml()。我想在上面动态添加的内容中调用一个函数。我的html和脚本如下。

的HTML

<div ng-app="ngBindHtmlExample">  <div ng-controller="ngBindHtmlCtrl">   <p ng-bind-html="myHTML"></p>  </div></div>

Java脚本

angular.module(''ngBindHtmlExample'', [''ngSanitize'']).controller(''ngBindHtmlCtrl'', [''$scope'',''$sce'', function ngBindHtmlCtrl($scope, $sce) {  $scope.myHTML =$sce.trustAsHtml(     ''I am an <code>HTML</code>string with <a href="#" ng-mouseover="removeExp()">links!</a> and other <em>stuff</em>'');    $scope.removeExp = function (){       console.log(''dfdfgdfgdfg'');    }}]);

jsfiddle

点击这里查看

答案1

小编典典

这有点棘手，因为ng-bind-html将只插入普通的旧html而不用麻烦对其进行编译（因此html中的任何指令都不会被angular处理。

诀窍是在模板更改时找到一种编译方法。例如，您可以创建一个执行此操作的指令。它看起来像：

.directive(''compileTemplate'', function($compile, $parse){    return {        link: function(scope, element, attr){            var parsed = $parse(attr.ngBindHtml);            function getStringValue() { return (parsed(scope) || '''').toString(); }            //Recompile if the template changes            scope.$watch(getStringValue, function() {                $compile(element, null, -9999)(scope);  //The -9999 makes it skip directives so that we do not recompile ourselves            });        }             }});

然后可以像这样使用它：

<p ng-bind-html="myHTML" compile-template></p>

在这里查看工作示例：

http://jsfiddle.net/3J25M/2/

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>

今天关于使用ng-bind-html和$ sce.trustAsHtml创建具有ng-model绑定的字符串和使用new创建对象之外,还可以用_________方法创建对象的分享就到这里，希望大家有所收获，若想了解更多关于$ sce.trustAsHtml中的呈现指令、Android的Html.escapeHtml和TextUtils.htmlEncode有什么区别？我什么时候应该使用其中一种？、Angular js中$ sce.trustAsHtml（）字符串中的调用函数、AngularJS 1.2.0 ngBindHtml和trustAsHtml不能与ngModel一起使用等相关知识，可以在本站进行查询。

本文标签：