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 attributetooltip-html-unsafe の代わりにtooltip使用する必要があります。

ツールチップには、tooltip と tooltip-html-unsafe の 2 つのバージョンがあります。前者はテキストのみを受け取り、提供された HTML をエスケープします。後者は、提供された HTML をすべて受け取り、それをツールチップに表示します。HTMLがサニタイズされていないため、「安全ではない」と呼ばれていました。ユーザーは、DOM にコンテンツを安全に配置できるようにする責任があります。

ng-repeat2毎回実行され、次のようにツールチップの 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 に答える