2016-10-20 1 views
1

Я пытаюсь использовать HTML для стиля названия в окне поповера в угловом bootrap, но он появляется в виде обычного текстаМожно ли использовать html в угловом заголовке bootstrap popover?

Поскольку тела поповера может содержать HTML-стиль, я думал, что это будет работать

<!doctype html> 
<html ng-app="popover.title.html"> 
    <head> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script> 
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.2.0.js"></script> 
    <script src="example.js"></script> 
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
    </head> 
    <body> 
<script type="text/javascript"> 
    angular.module('popover.title.html', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']); 
angular.module('popover.title.html').controller('htmlTitleCtrl', function ($scope, $sce) { 
    $scope.htmlPopover = $sce.trustAsHtml('<b style="color: red">I can</b> have <div class="label label-success">HTML</div> content'); 
}); 
</script> 
<div ng-controller="htmlTitleCtrl"> 
    <div style="padding-top: 15em; padding-left: 7em;"> 
     <button uib-popover-html="htmlPopover" popover-title="This is in <span style='color:red;'>red</span>" class="btn btn-default">HTML Popover</button> 
    </div> 
</div> 
    </body> 
</html> 

Запуск plunkr: https://plnkr.co/edit/A1qwqnxOZwLCs05ePS38?p=preview

можно ли иметь цвета отображаются правильно в названии?

ответ

1

Название popper использовано ng-bind, которое устанавливает элемент заголовка textContent (https://github.com/angular-ui/bootstrap/blob/master/template/popover/popover-html.html#L4, https://github.com/angular/angular.js/blob/master/src/ng/directive/ngBind.js#L63). Это означает, что HTML-код внутри заголовка не будет отображаться как HTML.

Вы можете, однако, использовать CSS для создания названия popover.

Смежные вопросы