javascript - example - renderizar html angularjs

Angularjs ng-bind-html-reemplazo inseguro

Question

Solía ​​ser capaz de usar ng-bind-html-unsafe para generar código no mejorado (porque la desinfección se produce en el servidor).

Pero ahora esa opción se ha ido? Sé que puedo usar $sce.trustAsHtml pero agregar eso al JavaScript en todas partes es un gran dolor cuando inseguro es tan fácil de usar.

¿Cómo me vuelvo inseguro?

Answer 1

Bueno, es bastante simple crear tu propia directiva, aquí hay un ejemplo.

Directiva :

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

Uso :

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

Demostración: http://jsfiddle.net/cC5VZ/2

Answer 2

La manera más simple, sin $ sce:

module.directive(''html'', function() {
function link(scope, element, attrs) {
var update = function() {
element.html(scope.html);
}
attrs.$observe(''html'', function(value) {
update();
});
}
return {
link: link,
scope: {
html: ''=''
}
};
});

Cómo utilizar:

<div html="angular.variable"></div>

Answer 3

Simpler de nuevo.

App.filter(''unsafe'', [''$sce'', function ($sce) {
return function (val) {
return $sce.trustAsHtml(val);
};
}]);

Uso:

<any ng-bind-html="content | unsafe"></any>

Para obtener más información sobre el enlace html, consulte los documentos aquí.

Solo una advertencia: asegúrese de que realmente confía en el html, o podría estar abriendo un agujero en la seguridad de su sitio.

Answer 4

Recomiendo consultar este ejemplo de SIMPLE JSFiddle. Fue un salvavidas:

http://jsfiddle.net/cC5VZ/2/

<div ng-app="ngBindHtmlExample">
<div ng-controller="ngBindHtmlCtrl">
<p ng-bind-html="myHTML" compile-template></p>
</div>
</div>
var app = angular.module(''app'', []);
app.controller(''testApp'', function( $scope ) {
$scope.testHTML = ''<h1> Welcome :) </h1>'';
});
app.directive(''bindHtmlUnsafe'', function( $parse, $compile ) {
return function( $scope, $element, $attrs ) {
var compile = function( newHTML ) {
newHTML = $compile(newHTML)($scope);
$element.html('''').append(newHTML);
};
var htmlName = $attrs.bindHtmlUnsafe;
$scope.$watch(htmlName, function( newHTML ) {
if(!newHTML) return;
compile(newHTML);
});
};
});