时间戳

首页 > 解决方案 > 如何让多行工具提示与 AngularJS 一起工作？

angularjs - 如何让多行工具提示与 AngularJS 一起工作？

问题描述

span我有一个简单的任务：在 AngularJS 中获取多行工具提示。按照我在网上阅读的各种说明，我尝试过：

  1. 使用 ng-attr-title 然后作为回车。
  2. 使用 data-html 和 data-original-title 然后
    作为回车。
  3. 使用 data-html 和 data-title 然后
    作为回车。

这些似乎都不起作用。我还能尝试使用 AngularJS 获得多行工具提示吗？

罗伯特

标签： angularjs

解决方案

您需要使用 $sce.trustAsHtml 将 html 绑定到多行的 ng-attr-title。见下文，

var app = angular.module('tooltipApp',[]);

var ctrl = app.controller('tooltipAppCtrl',['$scope','$sce',function($scope, $sce){
   $scope.text = $sce.trustAsHtml('Line1 \n Line2');
}])

<body ng-app='tooltipApp'>
  <div ng-controller='tooltipAppCtrl'>
    <span ng-attr-title={{text}}>See tool tip</span>
  </div>
</body>

推荐阅读