Вставить HTML в представление
можно ли создать фрагмент HTML в контроллере AngularJS и показать этот HTML в представлении?
это происходит из требования превратить непоследовательный JSON blob во вложенный список id : value
пар. Поэтому HTML создается в контроллере, и теперь я хочу его отобразить.
Я создал свойство модели, но не могу отобразить это в представлении без его печати HTML.
обновление
это похоже, что проблема возникает из-за углового рендеринга созданного HTML в виде строки в кавычках. Постараюсь найти способ обойти это.
пример контроллера :
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>
18 ответов
Угловое 1.x, Используйте ng-bind-html
в HTML:
<div ng-bind-html="thisCanBeusedInsideNgBindHtml"></div>
в этот момент Вы получите attempting to use an unsafe value in a safe context
ошибка, поэтому вам нужно либо использовать ngSanitize или $sce чтобы решить эту проблему.
$sce
использовать $sce.trustAsHtml()
в контроллере для преобразования строки html.
$scope.thisCanBeusedInsideNgBindHtml = $sce.trustAsHtml(someHtmlVar);
ngSanitize
есть 2 шага:
включить угловой дезинфекции.минута.Яш ресурсов, т. е.:
<script src="lib/angular/angular-sanitize.min.js"></script>
в js-файле (контроллер или обычно приложение.js), включая ngSanitize, т. е.:
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
вот копия:
Ok Я нашел решение для этого:
JS:
$scope.renderHtml = function(html_code) { return $sce.trustAsHtml(html_code); };
HTML-код:
<p ng-bind-html="renderHtml(value.button)"></p>
EDIT:
вот настройки:
JS файл:
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>
к счастью, вам не нужны какие-либо причудливые фильтры или небезопасные методы, чтобы избежать этого сообщения об ошибке. Это полная реализация для правильного вывода HTML-разметки в виде по назначению и безопасным способом.
модуль дезинфекции должен быть включен после углового:
<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>.";
наконец, в шаблон, он должен быть выведен следующим образом:
<p ng-bind-html="message"></p>
который произведет ожидаемый результат:42 - это ответ.
Я пробовал сегодня, единственный способ, который я нашел, это
<div ng-bind-html-unsafe="expression"></div>
ng-bind-html-unsafe
больше не работает.
Это самый короткий путь:
Создать фильтр:
myApp.filter('unsafe', function($sce) { return $sce.trustAsHtml; });
а на ваш взгляд:
<div ng-bind-html="customHtml | unsafe"></div>
P. S. Этот способ не требует от вас, чтобы включить 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);
начиная с углового 4, это способ, который теперь работает:
<div [innerHTML]="htmlString">
</div>
из этого вопрос здесь.
я обнаружил, что использование ng-sanitize не позволило мне добавить ng-click в html.
чтобы решить эту проблему, я добавил директиву. Вот так:
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);
}
}
});
и это HTML:
<htmldiv content="theContent"></htmldiv>
удачи.
просто сделал это с помощью ngBindHtml, следуя угловой(v1.4) docs,
<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()
существует еще одно решение этой проблемы, используя создание нового атрибут или директивы в угловой.
продукт-спецификациях.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"
};
});
.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>
вы также можете использовать ng-включить.
<div class="col-sm-9 TabContent_container" ng-include="template/custom.html">
</div>
можно использовать "НГ-шоу" показать скрыть эти данные шаблона.
см. ответы, которые я разместил для вас в этих двух местах:
http://forum.ionicframework.com/t/eval-json-data-as-html/1455/6
использовать
<div ng-bind-html="customHtml"></div>
и
angular.module('MyApp', ['ngSanitize']);
для этого вам нужно включить angular-sanitize.js
,
например, в вашем html-файле с
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-sanitize.js"></script>
вот решение сделать такой фильтр
.filter('trusted',
function($sce) {
return function(ss) {
return $sce.trustAsHtml(ss)
};
}
)
и примените это в качестве фильтра к ng-bind-html, как
<div ng-bind-html="code | trusted">
и спасибо Рубену Декропу
рабочий пример с трубой для отображения html в шаблоне с угловым 4.
1.Crated Pipe escape-html.труба.ТС
`
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);
}
}
` 2. Регистрация трубы в приложение.модуль.ТС
import {EscapeHtmlPipe} from './components/pipes/escape-html.pipe';
declarations: [...,EscapeHtmlPipe]
-
используйте в своем шаблоне
<div class="demoPipe" [innerHtml]="getDivHtml(obj.header) | keepHtml">
-
getDivHtml() { //can return html as per requirement}
пожалуйста, добавьте соответствующую реализацию для getDivHtml в связанный компонент.файл ТС.