Angular: Могу ли я полностью отключить дезинфекцию?

Можно ли полностью отключить дезинфекцию HTML?

То, что я хочу достичь, - это иметь в своем контроллере:

$scope.greeting = '<h2>Hello World</h2>'

И на мой взгляд

{{greeting}}

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

Просто для того, чтобы дать еще какой-то контекст - я готовлю простой "обход рамки" для разработки шаблона для конкретной системы.

При разработке шаблона для этой системы у них есть предопределенные фрагменты, которые вы можете разместить на своей странице, написав "{{something}}", но он не работает на angular (возможно, усы или что-то еще).

Теперь шаблон может быть разработан только онлайн, и это ОЧЕНЬ недружественный пользовательский процесс. Поэтому я настраиваю простой проект в angular с соответствующими маршрутами и т.д., Поэтому каждый может разработать шаблон на своей машине, а затем просто скопировать его в систему.

Вот почему в файлах шаблонов не должно быть примечательно, что это сделано в angular, оно просто как можно ближе к их системе.

Одна последняя заметка - я попытался:

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

Не сделал ничего для меня

Ответ 1

Да, вы можете отключить SCE, но это не приведет к тому, что ваши строки будут интерполированы в HTML

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

  $scope.movie = {title:"<h1>Egghead.io AngularJS, Binding</h1>",
 src:"http://www.youtube.com/embed/Lx7ycjC8qjE"};

и непосредственно интерполировать заголовок без использования ng-bind-html="movie.title"

<p>{{movie.title}}</p>

произведет это

<h1>Egghead.io AngularJS Binding</h1>

Прямая интерполяция кажется дезинфицированной, но на самом деле она не скомпилирована.

Интерполированная строка с HTML рассматривается как строка, если она не скомпилирована в директиве.

Другие фреймворки, как правило, "основаны на строках" (они напрямую передают браузер), тогда как AngularJS является "DOM based", он компилирует ваш HTML и управляет им агрессивно с областями и часами. Мартин Фаулер ссылается на это как Template Просмотр vs Transform View.

HTML может быть скомпилирован в директивах, но может быть интерполирован только в разметке и контроллерах

Я создал 2 Plunkers, пытающихся получить доступ к "небезопасному URL", что означает, что я интерполировал URL-адрес в ng-src без использования $sce.trustAs

Иллюстрация 1: Plunker 1 SCE отключен во время конфигурации

Разметка интерполирует "небезопасный URL":

    <p>{{movie.title}}</p>
    <iframe class="youtube-player" type="text/html" width="640" height="385" ng-src="{{movie.src}}" allowfullscreen frameborder="0">
</iframe>

Приложение отключает $sceProvider

var app = angular.module('plunker', ['ngSanitize']);
app.config(['$sceProvider',function($sceProvider){
    $sceProvider.enabled(false);
}]);
app.controller('MainCtrl', function($scope, $sce) {

  $scope.movie = {src:"http://www.youtube.com/embed/Lx7ycjC8qjE", title:"Egghead.io AngularJS Binding"};
});

"Небезопасный" URL-адрес интерполируется без ошибок. Отобразится видео.

Иллюстрация 2: Plunker 2 app.config прокомментировал, ergo, используя настройки SCE по умолчанию

var app = angular.module('plunker', ['ngSanitize']);
//app.config(['$sceProvider',function($sceProvider){
//    $sceProvider.enabled(false);
//}]);
app.controller('MainCtrl', function($scope, $sce) {

  $scope.movie = {src:"http://www.youtube.com/embed/Lx7ycjC8qjE", title:"Egghead.io AngularJS Binding"};
});

Ошибка:

Ошибка: [$ интерполяция: interr] Невозможно интерполировать: {{movie.src}} Ошибка: [$ sce: insecurl] Заблокированный ресурс загрузки из URL-адреса, который не разрешен $sceDelegate. URL: http://www.youtube.com/embed/Lx7ycjC8qjE

Ответ 2

Некоторое время назад мне удалось отобразить HTML-код, возвращенный из службы, например:

$scope.greeting = $sce.trustAsHtml('<h2>Hello World</h2>');

И в вашем HTML

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

Не забудьте ввести службу $sce в контроллер.

ИЗМЕНИТЕ здесь пример скрипта: https://jsfiddle.net/b78hkssn/2/

Ответ 3

Попробуйте улучшить или изменить стандартное поведение $sce с помощью декораторов:

 angular
  .module( appName, [ ] )
  .config([ "$provide", function( $provide )
  {
        // Use the `decorator` to enhance or change behaviors of original service instance; 

        $provide.decorator( '$sce', [ "$delegate", function( $delegate )
        {
            // Save the original $sce.parseAsHtml
            var parseAsHtml= $sce.parseAsHtml;

            $delegate.parseHtml= function( ) {
              // Implements your custom behavior...
            };

            return $delegate;
        }]);
  }]);

Ответ 4

Мне удалось найти другой способ решения проблемы без использования каких-либо директив.

В основном я использую инжектор для использования службы компиляции $.

JS:

angular.injector(['ng']).invoke(function($compile, $rootScope) {
    $('.html-content').append($compile('<h2>Hello World</h2>')($rootScope));
});

Вот демо: https://jsfiddle.net/davguij/tby59sk7/1/