instalar ejemplos descargar angularjs

ejemplos - instalar angularjs



¿Cómo se usa $ sce.trustAsHtml(cadena) para replicar ng-bind-html-unsafe en Angular 1.2+ (9)

ng-bind-html-unsafe se eliminó en Angular 1.2

Estoy tratando de implementar algo donde necesito usar ng-bind-html-unsafe . En los documentos y en el compromiso de github dicen:

ng-bind-html proporciona un comportamiento similar a ng-html-bind-unsafe (innerHTML es el resultado sin saneamiento) cuando se vincula con el resultado de $ sce.trustAsHtml (cadena).

¿Cómo haces esto?


Eso debería ser:

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

más en su controlador:

$scope.html = ''<ul><li>render me please</li></ul>''; $scope.trustedHtml = $sce.trustAsHtml($scope.html);

en lugar de la sintaxis antigua, donde podría hacer referencia directamente a la variable $scope.html :

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

Como varios comentaristas señalaron, $sce debe ser inyectado en el controlador, de lo contrario obtendrá $sce undefined error $sce undefined .

var myApp = angular.module(''myApp'',[]); myApp.controller(''MyController'', [''$sce'', function($sce) { // ... [your code] }]);


JavaScript

$scope.get_pre = function(x) { return $sce.trustAsHtml(x); };

HTML

<pre ng-bind-html="get_pre(html)"></pre>


Para los rieles (al menos en mi caso) si está utilizando la gema angularjs-rails , recuerde agregar el módulo de desinfección

//= require angular //= require angular-sanitize

Y luego cargarlo en su aplicación ...

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

Entonces puedes hacer lo siguiente:

En la plantilla:

%span{"ng-bind-html"=>"phone_with_break(x)"}

Y eventualmente:

$scope.phone_with_break = function (x) { if (x.phone != "") { return x.phone + "<br>"; } return ''''; }


Personalmente, desinfecto todos mis datos con algunas bibliotecas de PHP antes de ingresar a la base de datos, por lo que no necesito otro filtro XSS para mí.

Desde 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 || ''''); }); } }]);

Usar:

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

Para deshabilitar $sce :

app.config([''$sceProvider'', function($sceProvider) { $sceProvider.enabled(false); }]);


Si desea recuperar la directiva anterior, puede agregar esto a su aplicación:

Directiva:

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); }); } }; }]);

Uso

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

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


Simplemente creando un filtro hará el truco. (Respondido para Angular 1.6)

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

Y usa esto como sigue en el html.

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


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

1. usar filtro

app.filter(''unsafe'', function($sce) { return $sce.trustAsHtml; });

utilizando (html):

<span ng-bind-html="line | unsafe"></span> ==>click `aaa` show alert box

2. use ngSanitize: más seguro

incluye angular-sanitize.js

<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>

añadir ngSanitize en la aplicación angular de la raíz

var app = angular.module("app", ["ngSanitize"]);

utilizando (html):

<span ng-bind-html="line"></span> ==>click `aaa` nothing happen


Filtrar

app.filter(''unsafe'', function($sce) { return $sce.trustAsHtml; });

Uso

<ANY ng-bind-html="value | unsafe"></ANY>


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>