Question

我有一个如下所示的调用堆栈，问题是没有插入指令模板。因此，我可以将{{ data | json }}视为字符串，并且不会触发ng-repeat。如何处理？

情境的背景是我有一张Highchart的图表，我需要提供可点击的情节线。在线点击我需要显示带有动态内容的popover。

可选回答的问题：
我在赛事中的表现运作良好，但我不确定它是否也做得很好。我欢迎任何批评。想法是在随后的所有点击中隐藏popover。

代码：

1

series: {events: {click: function(e) {drillDownCall(e, dataGroups)}

2

function drillDownCall (e, dataGroups) {
  var elem = angular.element('#drilldown');
  if (!elem[0]) {
    elem = angular.element('<drilldown fancy-name="dataGroups"></drilldown>');
  }

  elem.css({
    position: 'absolute',
    top: e.pageY,
    left: e.pageX,
    width: '150px',
    height: '250px',
    zIndex: '2000',
    background: 'red'
  });

  var body = angular.element(document).find('body').eq(0);
  var scope = $rootScope.$new();
  scope.dataGroups = dataGroups;
  body.append($compile(elem)(scope));
}

3

.directive('drilldown', [
  '$compile',
  '$window',
  function (
    $compile,
    $window
  ) {
    return {
      restrict: 'E',
      replace: true,
      scope: {
        data: '=fancyName'
      },

      template: '' +
        '<div id="drilldown">{{ data | json }}' +
          '<ul>' +
            '<li ng-repeat="group in data">{{ group.name }}</li>' +
          '</ul>' +
        '</div>',

      link: function (scope, element) {
        var ele = $compile(element)(scope),
          off;

        angular.element($window).on('click', function(e) {
          scope.$emit('drilldown::click');
        });
        off = scope.$on('drilldown::click', function() {
          angular.element(ele).remove();
          angular.element($window).off('click');
          off();
        });
      }
    };
  }]
)

Answer 1

我自己无法测试，但我想我知道为什么。

所有内容的开始都是drillDownCall，并且由Angular.js摘要周期之外的事件调用。因此Angular.js不知道范围发生了变化，并且没有运行摘要周期，导致新指令显示为非编译的字符串串。（是的，即使您使用了$compile，它的工作方式也是如此）

总之，如果我记得正确，你至少需要一个摘要周期才能看到编译的指令。要触发摘要周期，您可以添加 $rootScope.$apply()或$rootScope.$applyAsync()或与drillDownCall事件处理程序结尾相同的任何内容。

你能试试吗？

动态添加的指令不是内插的

1 个答案: