ngIf 在自定义指令和 $watch 中答案

【问题标题】：ngIf inside custom directive and $watchngIf 在自定义指令和 $watch 中
【发布时间】：2014-07-12 15:56:31
【问题描述】：

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

工具提示出现问题。我想使用 ng-if 仅在存在数据时才显示某些内容，但它不起作用。我不知道是否存在范围问题，但这里是工具提示的代码。请注意，它在自定义指令的链接函数中的范围内。$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 仍然显示为数字：未定义。任何想法如何让这个工作？谢谢。

【问题讨论】：

不，没有错误。 style() 是一个 d3 的东西。
我不认为 ng-if 将与在链接函数中动态设置 html 一起工作，因为编译永远不会为它运行，即角度永远不知道有一个 ng-if，因为它是一个指令。您是否尝试过将其移至指令的编译函数？
我没有。不知道该怎么做。在 $watch 里面，我有一些东西会触发这个函数，它也在 $watch 里面。如果 showPopup 和事件处理程序封装在不同的函数中，我将如何触发？
如果没有看到更多的范围就真的帮不上忙。尝试将data 记录到控制台以查看它是什么
data 是一个包含 5 个对象的列表，每个对象都有名称、日期，有些还有编号。

标签： javascript angularjs d3.js

【解决方案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);

顺便说一句，这不是我的想法，我还没有测试过......

【讨论】：

没想到这一点，但你是对的——这是一种解决方法。我希望有一种更优雅的方式来使用角度。
@ukejoe 在您的指令中，您可以注入 $compile 服务并调用 $compile(pop.contents())(scope);其中范围是包含该数据的范围，它可能会为您提供所需的内容。事实上，看看你的代码，数据不包含在范围内，所以它永远不会工作，你需要说 scope.data = data;
我把它放在最后（在关闭 {} 之前）： $compile(pop.contents())(scope);并得到 Uncaught TypeError: undefined is not a function。也试过只是流行，没有运气。 pop.html() 也不起作用。
通常这些操作是在注入到指令的元素上执行的。您可以尝试类似： var el = angular.element(pop);在调用 $compile 之前将 pop 转换为 angular 元素，然后您需要将其附加到您的视图或调用 pop.html(el.html()) 或类似的东西
我会试试看的。如果它不起作用，我将在今天下午发布小提琴。谢谢。