ngIf在自定义指令和$ watch中

Question

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

工具提示出现问题。 我想使用ng-if仅在某些数据存在的情况下显示某些东西，但是它不起作用。 我不知道是否存在范围界定问题，但这是工具提示的代码。 请注意，它在自定义指令的链接函数内的scope。$ watch中：

      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：未定义。 任何想法如何使它工作？ 谢谢。

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);

顺便说一句，这还没完成，我还没有测试过...