1

我想在工具提示的列表上显示用户名，例如：“user1 和其他 5 个”，当我将鼠标悬停在“其他 5 个”上时，它将在工具提示上显示所有 5 个用户名（user2，user3 ..）。为此，我使用 Angular-bootstrap。

这是我的代码：

<div ng-repeat="c in classes">
   <span ng-if = 'c.users.length > 1'>
     <h2> {{c.users[0].name}}</h2>
     | &
     <a href="#" tooltip="<ul><li ng-repeat='u in c.users'>{{u.name}}</li></ul>"> 
        {{invention.newInventer.length-1}} Others  
    </a>
  </span>
</div>

它以字符串形式显示完整条件（不显示用户名）。如何在工具提示上获取所有用户名？

4

2 回答 2

1

1 你应该使用tooltip-html-unsafe 而不是tooltip属性：

工具提示有两个版本：tooltip 和 tooltip-html-unsafe。前者只接受文本，并将转义提供的任何 HTML。后者采用提供的任何 HTML 并将其显示在工具提示中；它被称为“不安全”，因为 HTML 没有经过清理。用户有责任确保内容可以安全地放入 DOM！

2 将您替换ng-repeat为每次将执行的自定义函数，并将为工具提示创建 html，如下所示：

  $scope.getUsersList=function(users){
    var html=angular.element("<ul/>");
    angular.forEach(users,function(value){
      html.append("<li>"+value.name+"</li>");
    });
    return html.html();

  };

和html：

<a href="#" tooltip-placement="bottom" 
      tooltip-html-unsafe="{{getUsersList(users)}}">Check me out!</a>

看看Plunker中的例子

于 2014-08-11T10:50:13.453 回答
0 
app.directive('tooltipDirective', ["$compile", function($compile){
        return {
            restrict: 'A',
            scope: false,
            link: function(scope, element, attrs){
                attrs.$observe('tooltipDirective',function(value){
                    element.tooltip({trigger: 'hover',placement:'bottom',title:value});
                });
            }
        }
    }]);


html:
<a href="#" tooltip-directive="<ul><li ng-repeat='u in c.users'>{{u.name}}</li></ul>"> 
        {{invention.newInventer.length-1}} Others  
    </a>
于 2014-08-11T10:35:12.017 回答