Как создать загрузочный загрузочный файл AngularJS UI с содержимым HTML?
Я хочу создать bootstrap popover с предварительным тегом, содержащим префиксный объект JSON. Наивная реализация,
<span popover='<pre>{[ some_obj | json:" " ]}</pre>'
popover-trigger='mouseenter'>
удаляет содержимое, прежде чем вставлять его во всплывающее окно. Какой лучший способ указать тело popover с содержимым html?
Ответы
Ответ 1
UPDATE
Как можно было видеть в этом, теперь вы можете сделать это без переопределения шаблона по умолчанию.
ORIGINAL:
Как из angular 1.2+ ng-bind-html-unsafe
удалено. вы должны использовать службу $sce. Ссылка.
Вот фильтр для создания надежного html.
MyApp.filter('unsafe', ['$sce', function ($sce) {
return function (val) {
return $sce.trustAsHtml(val);
};
}]);
Вот перезаписанный Angular шаблон Bootstrap 0.11.2, используя этот фильтр
// update popover template for binding unsafe html
angular.module("template/popover/popover.html", []).run(["$templateCache", function ($templateCache) {
$templateCache.put("template/popover/popover.html",
"<div class=\"popover {{placement}}\" ng-class=\"{ in: isOpen(), fade: animation() }\">\n" +
" <div class=\"arrow\"></div>\n" +
"\n" +
" <div class=\"popover-inner\">\n" +
" <h3 class=\"popover-title\" ng-bind-html=\"title | unsafe\" ng-show=\"title\"></h3>\n" +
" <div class=\"popover-content\"ng-bind-html=\"content | unsafe\"></div>\n" +
" </div>\n" +
"</div>\n" +
"");
}]);
EDIT: Ниже приведена Plunker.
РЕДАКТИРОВАТЬ 2: Поскольку этот ответ продолжает получать хиты, я буду поддерживать его как можно лучше. В качестве ссылки Здесь является шаблоном из репозитория angular -ui bootstrap. Если это изменится, шаблон переопределения потребует согласования обновлений и добавления атрибутов ng-bind-html=\"title | unsafe\"
и ng-bind-html=\"content | unsafe\"
для продолжения работы.
Для обновленной беседы проверьте здесь.
Ответ 2
Если вы используете версию angular -ui равную или выше 0.13.0, лучше всего использовать директиву popover-template
. Вот как его использовать:
<button popover-template="'popover.html'">My HTML popover</button>
<script type="text/ng-template" id="popover.html">
<div>
Popover content
</div>
</script>
Примечание. Не забывайте кавычки вокруг имени шаблона в popover-template="'popover.html'"
.
См. демонстрационный плункер
В качестве примечания можно экпортировать шаблон popover в выделенный html файл, а не объявлять его в элементе <script type="text/ng-template>
, как указано выше.
Смотрите второй демонстрационный плункер
Ответ 3
Я отправляю решение по проекту github: https://github.com/angular-ui/bootstrap/issues/520
Я хочу добавить эту функциональность в ваш проект, вот патч.
Добавьте эти директивы:
angular.module("XXX")
.directive("popoverHtmlUnsafePopup", function () {
return {
restrict: "EA",
replace: true,
scope: { title: "@", content: "@", placement: "@", animation: "&", isOpen: "&" },
templateUrl: "template/popover/popover-html-unsafe-popup.html"
};
})
.directive("popoverHtmlUnsafe", [ "$tooltip", function ($tooltip) {
return $tooltip("popoverHtmlUnsafe", "popover", "click");
}]);
И добавьте шаблон:
<div class="popover {{placement}}" ng-class="{ in: isOpen(), fade: animation() }">
<div class="arrow"></div>
<div class="popover-inner">
<h3 class="popover-title" ng-bind="title" ng-show="title"></h3>
<div class="popover-content" bind-html-unsafe="content"></div>
</div>
</div>
Использование: <button popover-placement="top" popover-html-unsafe="On the <b>Top!</b>" class="btn btn-default">Top</button>
Посмотрите на plunkr: http://plnkr.co/edit/VhYAD04ETQsJ2dY3Uum3?p=preview
Ответ 4
Вам нужно изменить шаблон popover по умолчанию, чтобы указать, что вы хотите разрешить содержимое Html.
Посмотрите div popover-content
, теперь он имеет привязку к свойству content
, позволяющему небезопасный html:
angular.module("template/popover/popover.html", []).run(["$templateCache", function ($templateCache) {
$templateCache.put("template/popover/popover.html",
"<div class='popover {{placement}}' ng-class='{ in: isOpen(), fade: animation() }'>" +
"<div class='arrow'></div><div class='popover-inner'>" +
"<h3 class='popover-title' ng-bind='title' ng-show='title'></h3>" +
"<div class='popover-content' ng-bind-html-unsafe='content'></div>" +
"<button class='btn btn-cancel' ng-click='manualHide()'>Cancel</button>" +
"<button class='btn btn-apply' ng-click='manualHide()'>Apply</button></div></div>");
}]);
Ответ 5
Для всех ваших обычных задач Bootstrap popover
вы можете использовать следующую директиву angular. Он удаляет беспорядок из HTML-шаблона и очень прост в использовании.
Вы можете настроить popover title
, content
, placement
, fade in/out delay
, trigger
событие и должен ли контент обрабатываться как html
. Он также предотвращает переполнение содержимого и отсечение.
Связанный плункер со всеми кодами здесь http://plnkr.co/edit/MOqhJi
Screencap
![imgur]()
Использование
<!-- HTML -->
<div ng-model="popup.content" popup="popup.options">Some element</div>
/* JavaScript */
this.popup = {
content: 'Popup content here',
options: {
title: null,
placement: 'right',
delay: { show: 800, hide: 100 }
}
};
JavaScript
/**
* Popup, a Bootstrap popover wrapper.
*
* Usage:
* <div ng-model="model" popup="options"></div>
*
* Remarks:
* To prevent content overflow and clipping, use CSS
* .popover { word-wrap: break-word; }
* Popup without title and content will not be shown.
*
* @param {String} ngModel popup content
* @param {Object} options popup options
* @param {String} options.title title
* @param {Boolean} options.html content should be treated as html markup
* @param {String} options.placement placement (top, bottom, left or right)
* @param {String} options.trigger trigger event, default is hover
* @param {Object} options.delay milliseconds or { show:<ms>, hide:<ms> }
*/
app.directive('popup', function() {
return {
restrict: 'A',
require: 'ngModel',
scope: {
ngModel: '=',
options: '=popup'
},
link: function(scope, element) {
scope.$watch('ngModel', function(val) {
element.attr('data-content', val);
});
var options = scope.options || {} ;
var title = options.title || null;
var placement = options.placement || 'right';
var html = options.html || false;
var delay = options.delay ? angular.toJson(options.delay) : null;
var trigger = options.trigger || 'hover';
element.attr('title', title);
element.attr('data-placement', placement);
element.attr('data-html', html);
element.attr('data-delay', delay);
element.popover({ trigger: trigger });
}
};
});
Ответ 6
Смотрите https://github.com/jbruni/bootstrap-bower-jbruni, которые позволяют использовать шаблон popover
Ответ 7
Следующий стиль CSS, похоже, сделал то, что я хотел в моем конкретном случае:
.popover-content {
white-space: pre;
font-family: monospace;
}
Общий вопрос остается открытым.