nguar-nvd3工具提示中的ng-repeat

Question

我需要在nvd3圖形中的工具提示內容中重複某些值，以及如何實現它。

我有一個JSON與數據一起發送，需要在工具提示中重複。我被卡住了，我需要一些幫助來實現這一點。還是有其他可以遵循的方法。

$scope.options = { 
      chart: { 
       type: 'multiBarHorizontalChart', 
       height: 380, 
       width: 350, 
       x: function(d) { 
        return d.label; 
       }, 
       y: function(d) { 
        return d.value; 
       }, 
       showControls: false, 
       showValues: true, 
       showLegend: false, 
       duration: 1000, 
       xAxis: { 
        showMaxMin: false 
       }, 
       yAxis: { 
        axisLabel: 'Values', 
        axisLabelDistance: 100, 
        tickFormat: function(d) { 
         return d3.format('.0f')(d); 
        } 
       }, 
       "tooltip": { 
        "enabled": true, 
        "headerEnabled": true, 
        "valueFormatter": function(d, i) { 
         "use strict" 
         return; 
        }, 
        "keyFormatter": function(d, i) { 
         var i = curr.split('$') 
         return i[1]; 
        }, 
        contentGenerator: function(key, x, y, e, graph) { 
         if (key.data.tooltip.length != 0) { 
          return html(key) 

         } else 
          return "No Data to Show"; 
        } 
       } 
      }, 
      title: { 
       enable: false, 
      }, 
     }; 

我需要NG-重複此HTML

function IpHtml(key) { 
      var head = $scope.iptraffic.category; 

      var html = '<div class="toolTipTraffic">' + 
       '<div class="head">' + 
       ' <b>' + head + '</b>' + 
       '</div>' + 
       ' <hr>' + 
       ' <table class="table toottipTableTraffic">' + 
       '  <tr ng-repeat=vals in key>' + // ng-repeat here 
       '   <td>IP</td>' + 
       '   <td>' + ': {{vals}}' + '</td>' + 
       '  </tr>' + 
       ' </table>' + 
       '</div>'; 
      return html 
     } 

Answer 1

你需要傳遞之前，編譯你的HTML來繪製

angular.module('exampleApp', []) 
    .controller('exampleController', ['$scope', '$compile', function ($scope, $compile) { 

    function IpHtml(key) { 
     var tooltipScope = $scope.$new(false); // inherit from parent, so we can use 'iptraffic.category' for header 
     tooltipScope.key = key; 

     var html = '<div class="toolTipTraffic">' + 
      '<div class="head">' + 
      ' <b ng-bind="iptraffic.category"></b>' + 
      '</div>' + 
      ' <hr>' + 
      ' <table class="table toottipTableTraffic">' + 
      '  <tr ng-repeat=vals in key>' + // ng-repeat here 
      '   <td>IP</td>' + 
      '   <td>' + ': {{vals}}' + '</td>' + 
      '  </tr>' + 
      ' </table>' + 
      '</div>'; 

     var element = $compile(html)(tooltipScope); 

     return element[0].outerHTML 
    } 
    }]);