AngularJS：为什么当父级有 ngIf 指令时我不能向祖父级元素添加属性

Question

我正在使用 vanilla AngularJS v1.4.5（无 jQuery），并希望我的自定义指令在编译时为其祖父元素添加一个属性。

在编译函数中，我可以使用element的parent()方法两次获取祖父元素，并使用attr()方法添加我的属性。但是，如果 parent 元素具有 ngIf 指令，则祖父元素不会获得该属性。

angular.module('myApp', [])
    .directive('foo', fooDirective)
;

function fooDirective() {
    return {
        compile : compile,
        priority: 601 // ngIf is 600
    };

    function compile(element, attrs) {
        var parent, grandparent;

        parent = element.parent();            
        grandparent = parent.parent();

        parent.attr('foo', 'bar');
        grandparent.attr('foo', 'bar');
    }
}

JSFiddle

这是我所知道的：

• 如果父元素上未使用ngIf，则该属性将添加到祖父元素。
• 该问题不应与 scope 相关，因为这是在编译阶段发生的，在作用域与任何元素相关联之前。
• 我的编译函数应该在ngIf之前运行，它的优先级为600（和doesn't have a compile function）。
• ngIf 完全删除并重新创建 DOM 中的元素（连同其子元素），但这不应影响祖父元素或更改其属性。

如果父元素具有ngIf 指令，谁能向我解释为什么我不能将属性添加到指令的祖父元素？

Answer 1

我还不完全确定为什么会发生这种情况，但是你有什么特别的原因为什么你用编译来做这个？我调整了您的指令以使用链接，它似乎工作得很好。

(function () {
    'use strict';

    angular.module('myApp', [])
        .directive('foo', fooDirective)
    ;

    function fooDirective() {
        return {
            link : link,
            priority: 601 // ngIf is 600
        };

        function link($scope, element, attrs) {
            var parent, grandparent;

            parent = element.parent();            
            grandparent = parent.parent();           
            parent.attr('foo', 'bar');
            grandparent.attr('foo', 'bar');
        }
    }

})();

编辑： 就像@NewDev 所说，您通常应该在链接阶段而不是在编译期间进行 DOM 操作。

Answer 2

所以，重申一下，问题是，为什么给出以下内容：

<grand-parent>
  <parent ng-if="condition">
    <foo></foo>
  </parent>
</grand-parent>

当尝试从foo 的编译中检索var grandparent = tElement.parent().parent() 时，grandparent 不引用<grand-parent> 元素。

答案是因为ngIf-引起的transclusion，即使condition === true。

嵌入是将内容（或元素 + 内容，取决于嵌入的类型）从 DOM 中拉出、编译，然后作为克隆提供给嵌入函数的过程，该函数本身可作为link函数的第5个参数使用：

link: function(scope, element, attrs, ctrls, transcludeFn){
  transcludeFn(scope, function cloneAttachFn(clonedContent){

    // clonedContent is the subtree that was transcluded, compiled and cloned
    element.append(clonedContent);
  });
}

因此，编译过程从<grand-parent> 开始，然后转到<parent>，在那里它看到一个指令-ngIf。因为ngIf 有transclude: "element"，所以它将<parent><foo></foo></parent> 从DOM 中拉出，并对其进行编译。因此，编译继续编译<parent> 上的其他低优先级指令（如果可用），然后编译foo 指令。

此时，<foo> 不在<grand-parent> 之下，tElement.parent().parent() 产生[]。