Question

我想在工具提示列表中显示用户名称，如： 'user1和5 others'，当我将鼠标悬停在'5 others'上时，它会在工具提示上显示所有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>

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

Answer 1

1您应该使用tooltip-html-unsafe instead of tooltip attribute：

工具提示有两个版本：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

中的示例

Answer 2

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>

没有在ng-repeat上显示工具提示的重复值

2 个答案: