Angularjs ng-bind-html-небезопасная замена

Question

Я использовал, чтобы использовать ng-bind-html-unsafe для вывода несаминированного кода (потому что санизация происходит с сервера).

Но теперь этот вариант отсутствует? Я знаю, что могу использовать $sce.trustAsHtml, но добавив, что для JavaScript повсюду огромная боль, когда небезопасная была настолько проста в использовании.

Как я могу стать небезопасным?

Answer 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

Answer 2

Простейшее путь, без $ 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: '=' 
     } 
    }; 
}); 

Как использовать:

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

Answer 3

Simpler снова.

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

Использование:

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

Более подробную информацию о HTML связывания проверить документацию here.

Просто предупреждение: убедитесь, что вы на самом деле доверять HTML, или вы могли бы открыть отверстие в безопасности ваших сайтов.

Answer 4

Я бы настоятельно рекомендовал проверить это SIMPLE JSFiddle пример. Был спасатель:

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

    }; 
});