Question

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

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

Here is a plunk演示了我使用$ compile运行的问题。如果我使用$ compile，嵌套指令执行两次。一次为外部指令编译方法，再次为手动一次。更糟糕的是，手册中的唯一一个似乎正确呈现内容。

如果我使用<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>，那么传递给内部指令的属性都不会在没有使用$$ prevSibling或$ parent前缀的情况下工作，因为ng-transclude似乎会创建一个新范围。这似乎从根本上是错误的，不得不像那样引用它。

修改：another plunk这是第一个分叉。这次我正在演示ng-transclude以及我如何使用$ parent来访问控制器的指令。

感谢。

Answer 1

我不确定您是否想知道这一点，但是您需要将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;

Answer 2

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

    scope:{
        data: '='
     }

现在您无需手动编译，如下所示。所以也删除它。

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

工作plunkr

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

2 个答案: