如何将标题设置为 <span>/<div> 标签，以便它应该读取数据中的 <br/> 标签并在单独的行中显示工具提示？

Question

我有下面的 angular js 示例代码，它将读取数据中的 HTML 标签并显示内容。屏幕上的数据显示如 -
嗨迈克！
早上好！！！

我有要求根据数据显示显示标题。这样 title/tooltip 也应该在 2 个单独的行中显示内容（考虑到数据中的 br。目前 title/tooltip 显示为 Hi Mike！<br/> 早上好！！！ 单行

示例代码：

<html ng-app>
<head>
    <title>Sample</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.1.1/angular.js"

type="text/javascript">

<script type="text/javascript">
            function SampleCtrl($scope) {
                $scope.message = "Hi Mike! <br/> Good Morning!!!"
            }   

        </script>
</head>
<body>
    <div ng-controller="SampleCtrl">
        <span title="{{message}}" ng-bind-html-unsafe="message"></span>
    </div>
</body>
</html>

Answer 1

您应该可以使用换行符 \n，而不是使用 HTML 换行符。因为 title 属性读取它的内容是一个字符串，所以它不会渲染 HTML 数据。

查看：http://jsfiddle.net/tcjbkqqz/

var app = angular.module('test', []);
app.controller('SampleCtrl', function($scope) {
     $scope.message = "Hi Mike!\nGood Morning!!!"
});

Answer 2

查看 $sanitize - https://docs.angularjs.org/api/ngSanitize/service/$sanitize

您可以在指令中使用它来在模型内容中实际呈现 html，而不仅仅是将其输出为字符串。

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

在我需要信任用户输入的最近项目中，我使用 $sce 创建了一个过滤器。 https://docs.angularjs.org/api/ng/service/$sce

.filter('trusthtml', function($sce) {
    return function(val) {
        return $sce.trustAsHtml(val);
    };
})

然后，对于您的示例，我将使用 -

<span ng-bind-html="message | trusthtml"></span>

您使用的 angular 是什么版本？我相信 ng-bind-html-unsafe（您正在使用的指令）已被弃用，并且无法找到有关它的文档。

如何将标题设置为 <span>/<div> 标签，以便它应该读取数据中的 <br/> 标签并在单独的行中显示工具提示？

How to set title to the <span>/<div> tag such that it should read <br/> tag in the data and show tooltip in separate lines?

html

javascript

css

jquery

angularjs