我正在尝试使用HTML在角度修改中的弹出窗口中设置标题样式,但它显示为纯文本
由于弹出框体可以包含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
是否可以在标题中正确显示颜色?
答案 0 :(得分:1)
使用ng-bind
的popover标题设置标题元素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标题的样式。