在指令链接函数中访问父元素（主体）答案

【问题标题】：Access parent element(body) in directive link function在指令链接函数中访问父元素（主体）
【发布时间】：2013-04-24 16:10:11
【问题描述】：

给定一个类似这样的 HTML 结构：

<body>
    <div id="one" my-directive></div>
    <div>
        <div id="two" my-directive></div>
    </div>
</body>

当我尝试访问 two 的父元素时它可以工作并且日志返回父 div，但是当父元素是主体时，如 one 的情况，它不起作用并返回一个空集.

app.directive 'myDirective', ->
    (scope,iElement,iAttrs) ->
        console.log iElement.parent()

编辑：我对这个问题的猜测是我的应用程序主体在客户端呈现并附加到模块运行方法上的主体元素。 html 是用$('body').html($compile(body.render())($rootScope)); 插入的，我想在将内容插入正文之前，在 $compile 函数中调用了该指令。我可以解决这个问题吗？

【问题讨论】：

似乎按预期工作：jsfiddle.net/mTNvq
这很奇怪，现在我对可能是什么问题有了一些线索。
尝试在链接函数中使用$evalAsync（在Angular 摘要循环之后执行，因此在Angular DOM 操作之后，但在浏览器渲染之前）或$timeout（在浏览器渲染之后执行）。
ng-app 在哪里？

标签： angularjs angularjs-directive

【解决方案1】：

您确实正确理解了您的问题：$compile 将触发您元素上的模板编译和链接阶段，因此在这样做时它没有父级。

解决这个问题的简单方法是先将 HTML 附加到正文，然后然后编译它。

var html = body.render();
$('body').html(html);
$compile(angular.element(body))($rootScope);

或者，如果您不想编译整个主体而只想编译新元素：

var elem = $( body.render() ).appendTo($('body'));
$compile(elem)($rootScope);

【讨论】：