AngularJS 显示字符串数组的工具提示内容/使用 HTML

Question

HTML (翡翠):

a(href='#', data-placement='right', title="{{ someArrayOfStrings }}" tooltip)

其中 someArrayOfStrings 在我的 angular 控制器初始化期间被声明为给定值：

Angular:

var myController = function($scope) {
    $scope.initialize = function(someArrayOfStrings) {
        $scope.someArrayOfStrings = someArrayOfStrings;
    }
};

var tooltip = function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs){
            $(element).hover(function(){
                $(element).tooltip('show');
            }, function(){
                $(element).tooltip('hide');
            });
        }
    };
};

目前，这会给我的工具提示内容如下：

["string1","string2","string3"]

丑得要命，完全不是我想要的。

我要显示的是这样的：

string1
string2
string3

我四处搜索了一下，似乎有很多方法可以解决这个问题，但到目前为止，我还没有设法让它很好地工作，例如http://jsfiddle.net/superscript18/fu7a2/6/, http://jsfiddle.net/WR76R/ and Render Html String in tooltip.

或者，我也许可以使用由 <br/> 标记分隔的串联字符串。但是，这需要我的工具提示接受 HTML 标签。似乎有一个可用的工具提示选项，即 html: true，但我无法使用它。

想法/帮助？

演示 fiddle @ jsfiddle.net/zr89sq6L/6/

Answer 1

试试这个解决方案 jsfiddle。

首先，创建指令来创建 tooltip $(element).tooltip({html: 'true'}).
其次，使用 stringArray.join('<br>') 创建带有 br 的字符串。

示例：

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

myApp.controller('MyCtrl', function($scope) {
    $scope.name = 'Superhero';
    $scope.stringArray = ["string1", "string2", "string3"];

  })
  .directive('tooltip', function() {
    return {
      restrict: "A",
      link: function(scope, element) {
        $(element).tooltip({
          html: 'true'
        });
      }
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="MyCtrl">
    Hello, {{name}}!
    <div ng-repeat="string in stringArray">
      {{ string }}
    </div>
    <a href="#" data-placement="right" title="{{ stringArray.join('<br>') }}" tooltip>tooltip</a>
  </div>
</div>

Answer 2

您只需将标题属性设置为 title="{{ stringArray.join('\u000A') }}"。请检查 fiddle http://jsfiddle.net/Noblemo/u9tt9xb2/

AngularJS 显示字符串数组的工具提示内容/使用 HTML

AngularJS Display Tooltip Content of Array of Strings / With HTML

jquery

twitter-bootstrap

angularjs

pug