Как удалить HTML, если удалить ng-bind-html-unsafe?

Я пытаюсь использовать $sanitizeпровайдера и ng-bind-htm-unsafeдирективу, чтобы позволить моему контроллеру вводить HTML в DIV.

Тем не менее, я не могу заставить его работать.

<div ng-bind-html-unsafe="{{preview_data.preview.embed.html}}"></div>

Я обнаружил, что это потому, что он был удален из AngularJS (спасибо).

Но без ng-bind-html-unsafe, я получаю эту ошибку:

http://errors.angularjs.org/undefined/$sce/unsafe

1. Вы должны убедиться, что sanitize.js загружен. Например, загрузите его с https://ajax.googleapis.com/ajax/libs/angularjs/[LAST_VERSION]/angular-sanitize.min.js
2. Вы должны включить ngSanitizeмодуль, app например:var app = angular.module('myApp', ['ngSanitize']);
3. вам просто нужно связать с ng-bind-htmlоригинальным htmlконтентом. Не нужно ничего делать в вашем контроллере. Разбор и преобразование автоматически выполняется ngBindHtmlдирективой. (Прочтите этот How does it workраздел: $ sce ). Таким образом, в вашем случае <div ng-bind-html="preview_data.preview.embed.html"></div>будет делать работу.

Вместо того чтобы объявлять функцию в своей области, как предлагает Алекс, вы можете преобразовать ее в простой фильтр:

angular.module('myApp')
    .filter('to_trusted', ['$sce', function($sce){
        return function(text) {
            return $sce.trustAsHtml(text);
        };
    }]);

Тогда вы можете использовать это так:

<div ng-bind-html="preview_data.preview.embed.html | to_trusted"></div>

И вот рабочий пример: http://jsfiddle.net/leeroy/6j4Lg/1/

Вы указали, что используете Angular 1.2.0 ..., поскольку один из других указанных комментариев ng-bind-html-unsafeустарел.

Вместо этого вы захотите сделать что-то вроде этого:

<div ng-bind-html="preview_data.preview.embed.htmlSafe"></div>

В вашем контроллере внедрите $sceслужбу и пометьте HTML как «доверенный»:

myApp.controller('myCtrl', ['$scope', '$sce', function($scope, $sce) {
  // ...
  $scope.preview_data.preview.embed.htmlSafe = 
     $sce.trustAsHtml(preview_data.preview.embed.html);
}

Обратите внимание, что вы захотите использовать 1.2.0-rc3 или новее. (Они исправили ошибку в rc3, из-за которой «наблюдатели» не могли корректно работать с доверенным HTML.)

Для меня самое простое и гибкое решение:

<div ng-bind-html="to_trusted(preview_data.preview.embed.html)"></div>

И добавьте функцию в свой контроллер:

$scope.to_trusted = function(html_code) {
    return $sce.trustAsHtml(html_code);
}

Не забудьте добавить $sceк инициализации вашего контроллера.

На мой взгляд, лучшее решение этого:

1. Создайте пользовательский фильтр, который может быть, например, в файле common.module.js, который будет использоваться в вашем приложении:

   var app = angular.module('common.module', []);
   
   // html filter (render text as html)
   app.filter('html', ['$sce', function ($sce) { 
       return function (text) {
           return $sce.trustAsHtml(text);
       };    
   }])

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

   <span ng-bind-html="yourDataValue | html"></span>

Теперь - я не понимаю, почему директива ng-bind-htmlнеtrustAsHtml является частью ее функции - мне кажется немного глупым, что она не делает

Во всяком случае - так я и делаю - в 67% случаев это работает всегда.

Вы можете создать свою собственную простую небезопасную привязку html, конечно, если вы используете ввод пользователя, это может быть угрозой безопасности.

App.directive('simpleHtml', function() {
  return function(scope, element, attr) {
    scope.$watch(attr.simpleHtml, function (value) {
      element.html(scope.$eval(attr.simpleHtml));
    })
  };
})

Вам не нужно использовать {{}} внутри ng-bind-html-unsafe:

<div ng-bind-html-unsafe="preview_data.preview.embed.html"></div>

Вот пример: http://plnkr.co/edit/R7JmGIo4xcJoBc1v4iki?p=preview

Оператор {{}} по сути является просто сокращением для ng-bind, поэтому то, что вы пытались сделать, равнозначно привязке внутри привязки, которая не работает.

У меня была похожая проблема. Все еще не могу получить контент из моих файлов уценки, размещенных на github.

После настройки белого списка (с добавленным доменом github) для $ sceDelegateProvider в app.js он работал как чудо.

Описание: использование белого списка вместо переноса в список доверенных, если вы загружаете контент из других URL-адресов.

Документы: $ sceDelegateProvider и ngInclude (для извлечения, компиляции и включения внешнего HTML-фрагмента)

Строгое контекстуальное экранирование может быть полностью отключено, что позволяет вводить html с помощью ng-html-bind. Это небезопасный вариант, но полезный при тестировании.

Пример из документации AngularJS по$sce :

angular.module('myAppWithSceDisabledmyApp', []).config(function($sceProvider) {
  // Completely disable SCE.  For demonstration purposes only!
  // Do not use in new projects.
  $sceProvider.enabled(false);
});

Присоединение приведенного выше раздела конфигурации к вашему приложению позволит вам добавить html ng-html-bind, но, как отмечает документ:

SCE дает вам много преимуществ в плане безопасности при минимальных затратах на кодирование. Будет гораздо сложнее взять отключенное приложение SCE и либо обезопасить его самостоятельно, либо включить SCE на более позднем этапе. Возможно, имеет смысл отключить SCE в тех случаях, когда у вас есть много существующего кода, который был написан до появления SCE, и вы переносите их по одному модулю.

Вы можете использовать фильтр, как это

angular.module('app').filter('trustAs', ['$sce', 
    function($sce) {
        return function (input, type) {
            if (typeof input === "string") {
                return $sce.trustAs(type || 'html', input);
            }
            console.log("trustAs filter. Error. input isn't a string");
            return "";
        };
    }
]);

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

<div ng-bind-html="myData | trustAs"></div>

он может использоваться для других типов ресурсов, например, ссылки на источник для iframes и других типов, объявленных здесь