由于 $compile，Javascript（Angular）嵌套指令加载两次

Question

我有一个嵌套在指令中的指令。为了满足我们设计师的需求，我要求内容是 DOM 节点的直接子节点。

  <div>
    <my-directive style="color: blue;">

      <p>Name: {{ ctl_a.fname }} {{ ctl_a.sname }}</p>
      <p>External Test: {{ xternal }}</p>

      <div>
        <nested-directive incoming="ctl_a.a_counter"></nested-directive>
      </div>

    </my-directive>
  </div>

让它正确加载的最佳选择是什么？ IE“my-directive”可以访问ctl_a.fname，“nested-directive”可以访问$scope.incoming，作为“ctl_a.a_counter”传入的参数。

Here is a plunk 演示了我在使用 $compile 时遇到的问题。如果我使用 $compile，嵌套指令会执行两次。一次用于外部指令编译方法，再次用于手动编译方法。更糟糕的是，手册是唯一能正确呈现内容的。

如果我使用ng-transclude，那么传递给内部指令的所有属性都没有前缀 $$prevSibling 或 $parent，因为 ng-transclude 似乎创建了一个新范围。必须这样引用它似乎是根本错误的。

编辑：这是another plunk，它分叉了第一个。这次我将演示 ng-transclude 以及我需要如何使用 $parent 来访问控制器的指令。

谢谢。

Answer 1

您似乎没有使用 my-directive 的 data 属性。您可以从 my-directive 中删除以下代码。

    scope:{
        data: '='
     }

现在您不需要手动编译如下。所以也删除它。

$compile(element.contents())(scope);

工作plunkr

Answer 2

我不确定您是否只想知道这些，但您需要将terminal: true 添加到您的指令定义对象中。这可以防止 Angular 在您自己编译之前处理 my-directive 标签中的 HTML。来自您的 plunker 的修改代码：

function myDirective($compile) {
  var directive = {
        compile: compile,
        controller: controller,
        controllerAs: 'ctl_a',
        replace: true,
        terminal:true, //<=======
        restrict: 'E',
        scope: {
            data: '='
        }
    };

    return directive;