在编译和链接 nested/transcluded 指令后执行某些操作
Do something when nested/transcluded directives have been compiled and linked
考虑类似以下指令标记的内容:
<!-- Directive A -->
<directive-a>
</directive-a>
<-- Directive B -->
<directive-b>
<directive-a>
<transclusion1></transclusion1>
</directive-a>
</directive-b>
一旦 <directive-a>
已经从 <directive-b>
编译+链接,我需要执行一些 DOM 操作。
当我在 <directive-b>
(或 compile
函数)上提供 link
函数时,<directive-a>
仍然没有其嵌入的内容。
一旦 <directive-a>
已经编译+链接,我不知道如何执行 DOM 操作。
最终解决方案比我开始实施解决方案时想象的要容易。
假设 <directive-a>
具有以下选项:
{
scope: {
"postLink": "&"
}
}
...并且,作为 controller()
函数的一部分,我执行:
{
controller: () => {
// Angular 1.5.3+
this.$postLink = $scope.postLink;
},
scope: {
"postLink": "&"
}
}
现在我可以挂钩 <directive-a>
$postLink
挂钩:
<-- Directive B -->
<directive-b>
<directive-a post-link="model.directiveAPostLink()">
<transclusion1></transclusion1>
</directive-a>
</directive-b>
当调用整个 model.directiveAPostLink()
函数时,<directive-a>
已经被编译和链接!
更多详情
正在检查 Angular GitHub 的存储库提交历史,I've found the following description:
$postLink
- Called after this controller's element and its children
been linked. Similar to the post-link function this hook can be
used to set up DOM event handlers and do direct DOM manipulation.
Note that child elements that contain templateUrl
directives will
not have been compiled and linked since they are waiting for their
template to load asynchronously and their own compilation and linking
has been suspended until that occurs.
这正是我的情况:我正在从 URL.
加载模板
考虑类似以下指令标记的内容:
<!-- Directive A -->
<directive-a>
</directive-a>
<-- Directive B -->
<directive-b>
<directive-a>
<transclusion1></transclusion1>
</directive-a>
</directive-b>
一旦 <directive-a>
已经从 <directive-b>
编译+链接,我需要执行一些 DOM 操作。
当我在 <directive-b>
(或 compile
函数)上提供 link
函数时,<directive-a>
仍然没有其嵌入的内容。
一旦 <directive-a>
已经编译+链接,我不知道如何执行 DOM 操作。
最终解决方案比我开始实施解决方案时想象的要容易。
假设 <directive-a>
具有以下选项:
{
scope: {
"postLink": "&"
}
}
...并且,作为 controller()
函数的一部分,我执行:
{
controller: () => {
// Angular 1.5.3+
this.$postLink = $scope.postLink;
},
scope: {
"postLink": "&"
}
}
现在我可以挂钩 <directive-a>
$postLink
挂钩:
<-- Directive B -->
<directive-b>
<directive-a post-link="model.directiveAPostLink()">
<transclusion1></transclusion1>
</directive-a>
</directive-b>
当调用整个 model.directiveAPostLink()
函数时,<directive-a>
已经被编译和链接!
更多详情
正在检查 Angular GitHub 的存储库提交历史,I've found the following description:
$postLink
- Called after this controller's element and its children been linked. Similar to the post-link function this hook can be used to set up DOM event handlers and do direct DOM manipulation.Note that child elements that contain
templateUrl
directives will not have been compiled and linked since they are waiting for their template to load asynchronously and their own compilation and linking has been suspended until that occurs.
这正是我的情况:我正在从 URL.
加载模板