Question

我正在使用d3.js创建一个简单的图形。当我将鼠标悬停在一个圆圈上时，我希望在工具提示中看到一些信息。图表的所有代码都在自定义指令中，当加载数据时（我使用的是范围。$ watch），我绘制图表没问题。

工具提示出现问题。我想使用ng-if只显示某些内容，如果它们存在数据，但它不起作用。我不知道是否存在范围问题，但这是工具提示的代码。请注意，它位于范围内。$ watch在custom指令的link函数中：

      var showPopup = function(el, data) {
        var svgPosition = $('#chart').position(),
          offsetTop = svgPosition.top,
          offsetLeft = svgPosition.left,
          circle = d3.select(el),
          top = parseInt(circle.attr('cy'), 10),
          left = parseInt(circle.attr('cx'), 10),
          r = parseInt(circle.attr('r'), 10),
          pop = d3.select('#tooltip');
        pop
          .html(
            '<div class="tooltip-wrapper">' +
              '<span class="number">' + data.week + '.</span>' +
              '<span class="person"><a href="#/person/' + data.name + '">' + data.name + '</a></span>' +
              '<ul>' +
                '<li ng-if="data.numbers">Numbers: ' + data.numbers + '</li>' +
              '</ul>' +
            '</div>'
          )
          .style('opacity', 1)
          .style('top', top + offsetTop + margin.top + 'px')
          .style('left', left + offsetLeft + margin.left + 'px');
      };

li仍然显示为Numbers：undefined。任何想法如何让这个工作？感谢。

Answer 1

你有没有试过这样的东西而不是ng-if？

var html = '<div class="tooltip-wrapper">' +
  '<span class="number">' + data.week + '.</span>' +
  '<span class="person"><a href="#/person/' + data.name + '">' + data.name + '</a></span>' +
  '<ul>';

if (data.numbers) {
  html += '<li ng-if="data.numbers">Numbers: ' + data.numbers + '</li>';
}

html += '<li ng-if="data.numbers">Numbers: ' + data.numbers + '</li></ul></div>';

pop.html(html);

这不是我的头脑，我没有测试过它......

ngIf里面的自定义指令和$ watch

1 个答案: