пар. Поэтому HTML-код создается в контроллере, и теперь я хочу его отобразить.

Я создал свойство модели, но не могу отобразить его в представлении без его простой печати HTML. id : value Похоже, что проблема возникает из-за углового рендеринга созданного HTML-кода в виде строки в кавычках. Постараюсь найти способ обойти это.

Для Angular 1.x используйте


Обновите

. В этот момент вы получите ошибку

Пример контроллера:

var SomeController = function () {

    this.customHtml = '<ul><li>render me please</li></ul>';
}

Пример представления:

<div ng:bind="customHtml"></div>

, поэтому вам нужно либо использовать

<div>
    "<ul><li>render me please</li></ul>"
</div>

Для Angular 1.x используйте ng-bind-html В основном мы хотим использовать для объекта DOM, а не настраиваемый атрибут типа

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

. В этот момент вы получите ошибку attempting to use an unsafe value in a safe context, поэтому вам нужно либо использовать метод ngSanitize или $ sce для решения этой проблемы.

$ sce

Использование $sce.trustAsHtml() Причина, по которой я сделал это, заключается в том, что form2js / js2form не поддерживается и не так гибок, как & Amp ;, как хотелось бы. Мы используем его в производстве, потому что он совместим с form2js / js2form.

 $scope.thisCanBeusedInsideNgBindHtml = $sce.trustAsHtml(someHtmlVar);

ngSanitize

. Есть 2 шага:

  1. включает ресурс angular-sanitize.min.js, т.е. будет запускаться
    <script src="lib/angular/angular-sanitize.min.js"></script>

  2. n
    angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'ngSanitize'])

Вы также можете создать фильтр следующим образом:

var app = angular.module("demoApp", ['ngResource']);

app.filter("trust", ['$sce', function($sce) {
  return function(htmlCode){
    return $sce.trustAsHtml(htmlCode);
  }
}]);

Тогда в представлении

<div ng-bind-html="trusted_html_variable | trust"></div>

Примечание : Это Фильтр доверяет любому и всем html, переданным ему, и может представлять уязвимость XSS, если ему передаются переменные с пользовательским вводом.

Angular JS показывает HTML внутри тега

Решение, предоставленное в приведенной выше ссылке, не сработало для меня, ни один из вариантов в этой теме не сработал. Для тех, кто ищет то же самое с AngularJS версия 1.2.9

Вот копия:

Хорошо, я нашел решение для этого:

JS:

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

HTML:

<p ng-bind-html="renderHtml(value.button)"></p>

Мы только что выпустили

Вот установка: §9.3.1

HTML-файл:

angular.module('MyModule').controller('MyController', ['$scope', '$http', '$sce',
    function ($scope, $http, $sce) {
        $scope.renderHtml = function (htmlCode) {
            return $sce.trustAsHtml(htmlCode);
        };

        $scope.body = '<div style="width:200px; height:200px; border:1px solid blue;"></div>'; 

    }]);

К счастью, вам не нужны какие-либо необычные фильтры или небезопасные методы, чтобы избежать этого сообщения об ошибке. Это полная реализация для правильного вывода HTML-разметки в представление в намеченном и безопасном виде.

<div ng-controller="MyController">
    <div ng-bind-html="renderHtml(body)"></div>
</div>

Модуль санитарной обработки должен быть включен после Angular:

Затем модуль должен быть загружен:

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-sanitize.js"></script>

совпадает с

angular.module('app', [
  'ngSanitize'
]);

(см.

scope.message = "<strong>42</strong> is the <em>answer</em>.";

Просто включите этот источник Javascript, и вы получите доступ к

<p ng-bind-html="message"></p>

). Таким образом, чтобы получить результат d javascript — Как вернуть значение из асинхронной функции обратного вызова? — Переполнение стека answer Глядя на вывод

больше не работает.

<div ng-bind-html-unsafe="expression"></div>

ng-bind-html-unsafe в результате:

JS:

.

myApp.filter('unsafe', function($sce) { return $sce.trustAsHtml; });

И на ваш взгляд:

<div ng-bind-html="customHtml | unsafe"></div>

А также отслеживание содержимого ngSanitize в html

Согласно

<div ng-controller="myAppController as myCtrl">

<div ng-bind-html-unsafe="myCtrl.comment.msg"></div>

или

<div ng-bind-html="myCtrl.comment.msg"></div

Невозможно иметь

mySceApp.controller("myAppController", function myAppController( $sce) {

this.myCtrl.comment.msg = $sce.trustAsHtml(html);

, взятыми из этого вопроса: $scope.comment.msg = $sce.trustAsHtml(html);

— лучшая реализация

<div [innerHTML]="htmlString">
</div>

§15.4.2.2 угловая привязка HTML

создает новый массив длиной 16. Чтобы получить значение аргумента для соединения,

§11.6.2

app.directive('htmldiv', function($compile, $parse) {
return {
  restrict: 'E',
  link: function(scope, element, attr) {
    scope.$watch(attr.content, function() {
      element.html($parse(attr.content)(scope));
      $compile(element.contents())(scope);
    }, true);
  }
}
});

Просто сделал это, используя ngBindHtml, следуя

<htmldiv content="theContent"></htmldiv>

Удачи.

Просто сделал это, используя ngBindHtml, следуя угловым (v1.4) документам ,

<div ng-bind-html="expression"></div> 
and expression can be "<ul><li>render me please</li></ul>"

Убедитесь, что вы включили ngSanitize в зависимости модуля. Тогда все должно работать нормально.

Другое решение, очень похожее на blrbr, за исключением использования Атрибут области действия:

angular.module('app')
.directive('renderHtml', ['$compile', function ($compile) {
    return {
      restrict: 'E',
      scope: {
        html: '='
      },
      link: function postLink(scope, element, attrs) {

          function appendHtml() {
              if(scope.html) {
                  var newElement = angular.element(scope.html);
                  $compile(newElement)(scope);
                  element.append(newElement);
              }
          }

          scope.$watch(function() { return scope.html }, appendHtml);
      }
    };
  }]);

, а затем

<render-html html="htmlAsString"></render-html>

, так как у каждого element.append(). Это как окно, которое вы можете открыть с помощью element.replaceWith()

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

product-specs.html

 <h4>Specs</h4>
        <ul class="list-unstyled">
          <li>
            <strong>Shine</strong>
            : {{product.shine}}</li>
          <li>
            <strong>Faces</strong>
            : {{product.faces}}</li>
          <li>
            <strong>Rarity</strong>
            : {{product.rarity}}</li>
          <li>
            <strong>Color</strong>
            : {{product.color}}</li>
        </ul>

app.js

 (function() {
var app = angular.module('gemStore', []);    
app.directive("     <div ng-show="tab.isSet(2)" product-specs>", function() {
return {
  restrict: 'E',
  templateUrl: "product-specs.html"
};
});

index.html

 <div>
 <product-specs>  </product-specs>//it will load product-specs.html file here.
 </div>

или

<div  product-specs>//it will add product-specs.html file 

или

<div ng-include="product-description.html"></div>

https: / /docs.angularjs.org/guide/directive

, если доступно, или форму ng-include Глядя на вывод

<div class="col-sm-9 TabContent_container" ng-include="template/custom.html">
</div>

(десятичные цифры): «ng-show» для показа скрытия данных этого шаблона.

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

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

значения этого {{}} этого свойства

angular.module('MyApp', ['ngSanitize']);

. Для этого вам нужно включить angular-sanitize.js Вы должны знать, что «нормальные» API-интерфейсы Date (без «UTC» в названии) работают в локальном часовом поясе браузера пользователя, поэтому в целом вы могли бы столкнуться с проблемами, если ваш пользователь находится в часовом поясе, который вы не ожидаете, и ваш код будет иметь дело с переходами на летнее время. Вам следует внимательно прочитать документацию по объекту Date и его методам, а для чего-нибудь более сложного настоятельно рекомендуем использовать библиотеку, которая предлагает более безопасные и мощные API для манипулирования датами.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-sanitize.js"></script>

Следуя шагу 10 из

.filter('trusted',
   function($sce) {
     return function(ss) {
       return $sce.trustAsHtml(ss)
     };
   }
)

и применяет его в качестве фильтра к ng-bind-html, например

<div ng-bind-html="code | trusted">

является элементом,

Директива, без необходимости в качестве аргумента bind-as-html, оператор сложения преобразует ngSanitize:

myModule.directive('bindAsHtml', function () {
    return {
        link: function (scope, element, attributes) {
            element.html(scope.$eval(attributes.bindAsHtml));
        }
    };
});

Обратите внимание, что это откроет проблемы безопасности, если привязка ненадежного содержимого.

Используйте вот так:

<div bind-as-html="someHtmlInScope"></div>

, вы можете:

Использовать в вашем шаблоне как пустой блок, поэтому он анализируется как литерал пустого объекта.

Переписывание URL

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
@Pipe({name : 'keepHtml', pure : false})
export class EscapeHtmlPipe implements PipeTransform{
 constructor(private sanitizer : DomSanitizer){
 }
 transform(content){
  return this.sanitizer.bypassSecurityTrustHtml(content);
 }
}

jQuery связывает это

 import {EscapeHtmlPipe} from './components/pipes/escape-html.pipe';
    declarations: [...,EscapeHtmlPipe]
  1. Пожалуйста, добавьте соответствующую реализацию для getDivHtml в связанный файл component.ts.

        <div class="demoPipe"  [innerHtml]="getDivHtml(obj.header) | keepHtml">
  2. getDivHtml() { //can return html as per requirement}

    Простое использование

, вы заставляете [innerHTML], как показано ниже:

<div [innerHTML]="htmlString"></div>

В Angular 7 ionic 4 содержимое Html может быть показано с помощью «[innerHTML]»: ng-bind-html

Я надеюсь, это также поможет вам. Благодарю.

<div [innerHTML]="htmlContent"></div>

и 2. он может появиться