Wie verwenden Sie $sce.trustAsHtml(string) zu replizieren ng-bind-html-unsafe in Eckigen 1.2+

ng-bind-html-unsafe entfernt wurde, in Eckigen 1.2

Ich versuche, etwas umzusetzen, wo ich ng-bind-html-unsafe. In der Dokumentation und auf der github-commit-Sie sagen:

ng-bind-html bietet ng-html-bind-unsicher-wie-Verhalten (innerHTML ist das Ergebnis ohne
- Bereinigung), wenn Sie an das Ergebnis gebunden $sce.trustAsHtml(string).

Wie tun Sie dies?

mögliche Duplikate von "HTML Einfügen" in die Ansicht mit AngularJS

InformationsquelleAutor timhaak | 2013-08-20

angularjs

237

Werden sollten:
```
<div ng-bind-html="trustedHtml"></div>
```
plus im controller:
```
$scope.html = '<ul><li>render me please</li></ul>';
$scope.trustedHtml = $sce.trustAsHtml($scope.html);
```
anstelle der alten syntax, wo könnte man die Referenz $scope.html variable direkt:
```
<div ng-bind-html-unsafe="html"></div>
```
Wie einige Kommentatoren darauf hingewiesen, $sce gespritzt werden in den controller, sonst erhalten Sie $sce undefined Fehler.
```
 var myApp = angular.module('myApp',[]);

 myApp.controller('MyController', ['$sce', function($sce) {
    //... [your code]
 }]);
```
Wie können Sie dies tun mit einem Wert von einer Funktion zurückgegeben wird? <p ng-bind-html="">{{Beschreibung(Kategorie.id)}}</p>
Nicht sicher, wenn ich dir Recht, aber: <p ng-bind-html="trustedHtml"></p> und $scope.trustedHtml = $sce.trustAsHtml(description(category.id));
Ich Liebe Sie für die Beantwortung! Anscheinend wurde das Problem, mich mit 1.0.8. Ich habe ein Formular mit dynamischer Anzahl der Abschnitte so ändern, ich wollte die richtige Beschreibung. <p ng-bind-html="description(category.id)"></p> dann die Letzte Zeile der Funktion: return $sce.trustAsHtml(value);
Aber... var x = sce.trustAsHtml('foo'); var y = sce.trustAsHtml('foo'); x==y; false ... So sollte dies nicht eine unendliche digest-Schleife, da Ihre Funktion liefert ein neues Objekt ?
Erwähnenswert ist auch $sce übergeben werden muss in die Steuerung, oder Sie erhalten $sce ist nicht definiert

InformationsquelleAutor Nenad
624

Filter
```
app.filter('unsafe', function($sce) { return $sce.trustAsHtml; });
```
Nutzung
```
<ANY ng-bind-html="value | unsafe"></ANY>
```
Weise bessere Lösung als die akzeptierte Antwort, danke!
Warum brauchen Sie ngSanitize hier?
da die $sce-service ist definiert in ngSanitize. Sie brach auseinander, große Funktionalität, so dass wir verwenden können Winkel nur ein wenig und nicht immer das gesamte framework.
in der version 1.2 (wenn Sie Hinzugefügt dies) es aktiviert ist, standardmäßig als Teil der core, nicht ngSanitize, so gibt es keine Notwendigkeit für ngSanitize
Dies ist eine design-Entscheidung, die die Winkel-team - das ist wie der Filter umgesetzt werden sollte - wenn Sie es tun, sonst werden Sie nicht arbeiten. Der Grund, warum dieser muss wieder eine Funktion ist, die Winkel können Sie verzögern, bis es 'findet den richtigen moment". Sonst würde das framework keinerlei Einfluss auf wenn der filter aufgerufen wird. Das ist sowohl gut als auch schlecht, aber soweit ich das beurteilen kann -, ist es notwendig, zu bewältigen angulars' tricky Verarbeitung. Mehr info hier: docs.angularjs.org/api/ng/provider/$filterProvider

InformationsquelleAutor Chris
16

Ich persönlich bereinigen, alle meine Daten mit einigen PHP-Bibliotheken, bevor Sie in die Datenbank, so gibt es keine Notwendigkeit für eine weitere XSS-filter für mich.

Von AngularJS 1.0.8
```
directives.directive('ngBindHtmlUnsafe', [function() {
    return function(scope, element, attr) {
        element.addClass('ng-binding').data('$binding', attr.ngBindHtmlUnsafe);
        scope.$watch(attr.ngBindHtmlUnsafe, function ngBindHtmlUnsafeWatchAction(value) {
            element.html(value || '');
        });
    }
}]);
```
Verwenden:
```
<div ng-bind-html-unsafe="group.description"></div>
```
Deaktivieren $sce:
```
app.config(['$sceProvider', function($sceProvider) {
    $sceProvider.enabled(false);
}]);
```
Ich bin unklar, was der Unterschied zwischen den beiden Beispielen. Eines unserer team-Mitglieder hat ein problem, Sie haben System.aus.println(&bdquo;Hello World!“); in der Datenbank. Sie ist mit <div data-ng-bind-html="text"></div> und es erscheint auf der Seite als: System.aus.println(&bdquo;Hello World!“,);. Sagen Sie, dass mit Ihrem ngBindHtmlUnsafe Richtlinie würde dieses problem beheben?
Ich glaube, es würde funktionieren, wenn es war <script>System.out.printIn("Hello World!");</script>, habe nicht versucht dies persönlich, da meine PHP-entfernt alle JS aus Benutzereingaben. Ich entfernte meine zweite Beispiel, weil die Winkel-die native ist in jeder Hinsicht überlegen, nur diese verwenden.
Wie Sie dies tun, für summernote-editor zunächst werde ich die json-Daten(mit dem html-Code) vom server, in summernote ich bin mit ng-model. wie man den code als vertrauenswürdig für die Anzeige im editor summernote

InformationsquelleAutor Michael J. Calkins
8

var line = "<label onclick="alert(1)">aaa</label>";

1. verwenden Sie filter
```
app.filter('unsafe', function($sce) { return $sce.trustAsHtml; });
```
verwenden (html):
```
<span ng-bind-html="line | unsafe"></span>
==>click `aaa` show alert box
```
2. verwenden ngSanitize : sicherer

gehören angular-sanitize.js
```
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
```
hinzufügen ngSanitize im root-Winkel-app
```
var app = angular.module("app", ["ngSanitize"]);
```
verwenden (html):
```
<span ng-bind-html="line"></span>
==>click `aaa` nothing happen
```
Wie Sie dies tun, für summernote-editor zunächst werde ich die json-Daten(mit dem html-Code) vom server, in summernote ich bin mit ng-model. wie man den code als vertrauenswürdig für die Anzeige im editor summernote

InformationsquelleAutor nguyên

Erstellen Sie einfach einen filter wird den trick tun. (Beantwortet für Eckige 1.6)

.filter('trustHtml', [
        '$sce',
        function($sce) {
            return function(value) {
                return $sce.trustAs('html', value);
            }
        }
    ]);

Und verwenden Sie diese wie folgt in den html-Code.

<h2 ng-bind-html="someScopeValue | trustHtml"></h2>

InformationsquelleAutor STEEL

Wenn Sie wollen, dass die alte Richtlinie zurück, können Sie fügen Sie diese, um Ihre app:

Richtlinie:

directives.directive('ngBindHtmlUnsafe', ['$sce', function($sce){
    return {
        scope: {
            ngBindHtmlUnsafe: '=',
        },
        template: "<div ng-bind-html='trustedHtml'></div>",
        link: function($scope, iElm, iAttrs, controller) {
            $scope.updateView = function() {
                $scope.trustedHtml = $sce.trustAsHtml($scope.ngBindHtmlUnsafe);
            }

            $scope.$watch('ngBindHtmlUnsafe', function(newVal, oldVal) {
                $scope.updateView(newVal);
            });
        }
    };
}]);

Nutzung

<div ng-bind-html-unsafe="group.description"></div>

Quelle - https://github.com/angular-ui/bootstrap/issues/813

Verhält sich nicht das gleiche.
Wie Sie dies tun, für summernote-editor zunächst werde ich die json-Daten(mit dem html-Code) vom server, in summernote ich bin mit ng-model. wie man den code als vertrauenswürdig für die Anzeige im editor summernote

InformationsquelleAutor Adrian Enriquez

3

JavaScript
```
$scope.get_pre = function(x) {
    return $sce.trustAsHtml(x);
};
```
HTML
```
<pre ng-bind-html="get_pre(html)"></pre>
```
Wie Sie dies tun, für summernote-editor zunächst werde ich die json-Daten(mit dem html-Code) vom server, in summernote ich bin mit ng-model. wie man den code als vertrauenswürdig für die Anzeige im editor summernote

InformationsquelleAutor wcc526
1

Für Schienen (zumindest in meinem Fall), wenn Sie mit der angularjs-rails gem, bitte vergessen Sie nicht, die sanitize-Modul
```
//= require angular
//= require angular-sanitize
```
Laden und dann im app...
```
var myDummyApp = angular.module('myDummyApp', ['ngSanitize']);
```
Dann können Sie Folgendes tun:

Auf der Vorlage:
```
%span{"ng-bind-html"=>"phone_with_break(x)"}
```
Und schließlich:
```
$scope.phone_with_break = function (x) {
  if (x.phone != "") {
   return x.phone + "<br>";
  }
  return '';
}
```
Wie Sie dies tun, für summernote-editor zunächst werde ich die json-Daten(mit dem html-Code) vom server, in summernote ich bin mit ng-model. wie man den code als vertrauenswürdig für die Anzeige im editor summernote
Check this out: github.com/summernote/summernote/issues/...

InformationsquelleAutor DevDude

my helpful code for others(just one aspx to do text area post)::

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication45.WebForm1" %>

<!DOCTYPE html>

    enter code here

<html ng-app="htmldoc" xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="angular.min.js"></script>
    <script src="angular-sanitize.min.js"></script>
    <script>
        angular.module('htmldoc', ['ngSanitize']).controller('x', function ($scope, $sce) {
            //$scope.htmlContent = '<script> (function () { location = \"http://moneycontrol.com\"; } )()<\/script> In last valid content';
            $scope.htmlContent = '';
            $scope.withoutSanitize = function () {
                return $sce.getTrustedHtml($scope.htmlContent);
            };
            $scope.postMessage = function () {
                var ValidContent = $sce.trustAsHtml($scope.htmlContent);

                //your ajax call here
            };
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        Example to show posting valid content to server with two way binding
        <div ng-controller="x">
            <p ng-bind-html="htmlContent"></p>
            <textarea ng-model="htmlContent" ng-trim="false"></textarea>
            <button ng-click="postMessage()">Send</button>
        </div>
    </form>
</body>
</html>

InformationsquelleAutor Saurabh

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

1. verwenden Sie filter

2. verwenden ngSanitize : sicherer