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

标签 javascript jquery html css angularjs

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

我有要求根据数据显示显示标题。这样的标题/工具提示也应该在 2 个单独的行中显示内容(考虑到数据中的 br。当前标题/工具提示显示为 Hi Mike!<br/> Good Morning!!!单行

示例代码:

<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>

最佳答案

您应该能够使用换行符 \n 而不是使用 HTML 换行符。因为 title 属性将其内容作为字符串读取,所以它不会呈现 HTML 数据。

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

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

关于javascript - 如何将标题设置为 <span>/<div> 标签,以便它应该读取数据中的 <br/> 标签并在单独的行中显示工具提示?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27785357/

相关文章:

javascript - 单击时添加/重命名 ID

javascript - 如何在搜索栏中附加href以选择下拉列表中的选项?

html - Wordpress 仅在窄屏幕上读取某些样式

使用 smartadmin 模板时 html 内容不会更新

javascript - HTML5 - 检查是否允许自动播放

javascript - 如何在 2 列中显示多个 html 表格

javascript - $ 登录 javascript 试图杀死我,谁能帮我摆脱困境

javascript - 对数组中的项目求和

javascript - 展开和折叠 Accordion 时,图标不会相应地切换

javascript - 点击时,如何让音频一直播放?