Angularjs 不插值动态添加的指令

我有一个如下所示的调用堆栈，问题是指令模板并没有插值。因此，我可以将

{{data | json}}

视为字符串，并且

ng repeat

不会被触发。如何处理这个问题

这种情况的背景是，我有一个Highchart的图表，我需要提供可点击的绘图线。在线单击我需要显示带有动态内容的popover

要回答的可选问题：
我的比赛进行得很好，但我不确定是否也做得很好。对此，我欢迎任何批评。其想法是在所有后续点击中隐藏popover

代码：

一,

二,

函数drillDownCall（e，数据组）{
var elem=角度元素（“#向下展开”）；
如果（！elem[0]）{
elem=角元素（“”）；
}
元素css({
位置：'绝对'，
上图：e.pageY，
左：e.pageX，
宽度：“150px”，
高度：'250px'，
zIndex:'2000'，
背景：“红色”
});
var body=angular.element（document.find（'body'）.eq（0）；
var scope=$rootScope.$new（）；
scope.dataGroups=数据组；
追加（$compile（elem）（scope））；
}

三,

.directive（'drilldown'[
“$compile”，
“$window”，
作用(
$compile，
$window
) {
返回{
限制：'E'，
替换：正确，
范围：{
数据：'=fancyName'
},
模板：“”+
“{data}json}”+
“
”+
“
{{group.name}
”+
“
”+
'',
链接：功能（范围、元素）{
变量ele=$compile（元素）（范围），
关
角度.element（$window）.on（'click'，函数（e）{
作用域。$emit（'drilldown:：click'）；
});
off=作用域。$on（'drilldown:：click'，function（）{
角元素（ele.remove（）；
角度.element（$window）.off（'click'）；
off（）；
});
}
};
}]
)

我自己无法测试，但我想我知道原因

一切的开始是

drillDownCall

，它由Angular.js摘要周期之外的事件调用。因此Angular.js不知道范围有变化，也不运行摘要循环，导致新指令显示为未编译的字符串串。（是的，即使您使用了

$compile

它也是这样工作的）

总之，如果我没记错的话，您至少需要一个摘要周期才能看到该指令被编译。要触发摘要循环，可以添加

$rootScope.$apply（）

或

$rootScope.$applyAsync（）

或与之相当的任何内容，直到

drillDownCall

事件处理程序的末尾

---

你能试试这个吗？

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

一切的开始是

drillDownCall

，它由Angular.js摘要周期之外的事件调用。因此Angular.js不知道范围有变化，也不运行摘要循环，导致新指令显示为未编译的字符串串。（是的，即使您使用了

$compile

它也是这样工作的）

总之，如果我没记错的话，您至少需要一个摘要周期才能看到该指令被编译。要触发摘要循环，可以添加

$rootScope.$apply（）

或

$rootScope.$applyAsync（）

或与之相当的任何内容，直到

drillDownCall

事件处理程序的末尾

---

你能试试这个吗？

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

一切的开始是

drillDownCall

，它由Angular.js摘要周期之外的事件调用。因此Angular.js不知道范围有变化，也不运行摘要循环，导致新指令显示为未编译的字符串串。（是的，即使您使用了

$compile

它也是这样工作的）

总之，如果我没记错的话，您至少需要一个摘要周期才能看到该指令被编译。要触发摘要循环，可以添加

$rootScope.$apply（）

或

$rootScope.$applyAsync（）

或与之相当的任何内容，直到

drillDownCall

事件处理程序的末尾

---

你能试试这个吗？

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

一切的开始是

drillDownCall

，它由Angular.js摘要周期之外的事件调用。因此Angular.js不知道范围有变化，也不运行摘要循环，导致新指令显示为未编译的字符串串。（是的，即使您使用了

$compile

它也是这样工作的）

总之，如果我没记错的话，您至少需要一个摘要周期才能看到该指令被编译。要触发摘要循环，可以添加

$rootScope.$apply（）

或

$rootScope.$applyAsync（）

或与之相当的任何内容，直到

drillDownCall

事件处理程序的末尾

---

你能试试这个吗？

嘿。我刚刚得出了同样的结论：）。最后是包装

body.append（$compile（elem）（scope））作用域的code>。$apply（fn（）{}）

。谢谢你的重播。顺便说一句，你能谈谈整个解决方案的设计吗？这是个好办法吗？嘿。我刚刚得出了同样的结论：）。最后是包装

body.append（$compile（elem）（scope））作用域的code>。$apply（fn（）{}）

。谢谢你的重播。顺便说一句，你能谈谈整个解决方案的设计吗？这是个好办法吗？嘿。我刚刚得出了同样的结论：）。最后是包装

body.append（$compile（elem）（scope））作用域的code>。$apply（fn（）{}）

。谢谢你的重播。顺便说一句，你能谈谈整个解决方案的设计吗？这是个好办法吗？嘿。我刚刚得出了同样的结论：）。最后是包装

body.append（$compile（elem）（scope））作用域的code>。$apply（fn（）{}）

。谢谢你的重播。顺便问一下，你能谈谈整个解决方案的设计吗

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

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

.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();
        });
      }
    };
  }]
)