С удалением 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, Я получаю эту ошибку:



http://errors.angularjs.org/undefined/$sce / небезопасно

563   10  

10 ответов:

  1. вы должны убедиться, что санировать.с 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 содержание. Нет необходимости делать что-либо еще в вашем контроллере. Разбор и преобразование выполняется автоматически с помощью на: $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 для инициализации контроллера.

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

  1. создать пользовательский фильтр, который может быть в общем.модуль.например, 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, поэтому то, что вы пытались, сводится к привязке внутри привязки, которая не работает.

У меня была похожая проблема. Все еще не удалось получить контент из моих файлов 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

    Ничего не найдено.