С удалением ng-bind-html-unsafe, как мне ввести HTML?
Я пытаюсь использовать $sanitize провайдера и ng-bind-htm-unsafe директива, позволяющая моему контроллеру вводить HTML в DIV.
однако, я не могу заставить его работать.
<div ng-bind-html-unsafe="{{preview_data.preview.embed.html}}"></div>
я обнаружил, что это потому, что он был удален из AngularJS (спасибо).
но без ng-bind-html-unsafe, Я получаю эту ошибку:
10 ответов:
- вы должны убедиться, что санировать.с JS загружается. Например, загрузите его из https://ajax.googleapis.com/ajax/libs/angularjs/[LAST_VERSION]/angular-sanitize.min.js
- вы должны включить
ngSanitizeмодуль наappнапример:var app = angular.module('myApp', ['ngSanitize']);- вам просто нужно связать с
ng-bind-htmlоригиналhtmlсодержание. Нет необходимости делать что-либо еще в вашем контроллере. Разбор и преобразование выполняется автоматически с помощью на: $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/
вы указали, что используете угловой 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для инициализации контроллера.
лучшее решение для этого, на мой взгляд, это:
создать пользовательский фильтр, который может быть в общем.модуль.например, 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); }; }])использование:
<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, поэтому то, что вы пытались, сводится к привязке внутри привязки, которая не работает.
У меня была похожая проблема. Все еще не удалось получить контент из моих файлов markdown, размещенных на github.
после настройки белого списка (с добавлением домена github) в $sceDelegateProvider в приложении.js это сработало как шарм.
описание: использование белого списка вместо переноса как доверенного, если вы загружаете контент из разных URL-адресов.
Docs: $sceDelegateProvider и ngInclude (для извлечения, компиляции и включая внешний HTML фрагмент)
Вы можете использовать фильтр, как этот
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 и других типов объявленных здесь
строгое контекстное экранирование может быть полностью отключено, что позволяет вводить 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, но как отмечает doc:SCE дает вам много преимуществ безопасности для небольших накладных расходов на кодирование. Так и будет гораздо сложнее взять приложение с отключенным SCE и либо закрепите его самостоятельно или включите SCE на более позднем этапе. Это может сделать смысл отключить SCE для случаев, когда у вас есть много существующего кода это было написано до того, как SCE был представлен, и вы переносите их модуль за один раз.
Comments