在组件完全就绪后执行一个函数答案

【问题标题】：Execute a function after component is fully ready在组件完全就绪后执行一个函数
【发布时间】：2018-03-02 18:08:15
【问题描述】：

我有一个 angularjs 组件，它有一个模板、一个控制器、一些绑定、一些嵌入部分。

我将这个组件连同它的属性一起放在我的 DOM 中：

<mycomponent attr1="x" attr2="y"></mycomponent>

这些属性值将被组件的控制器使用和/或在组件的模板中被嵌入到某个地方。

我需要在组件完全创建之后运行一个函数，即它的模板已经在DOM上创建并且所有被嵌入的元素都被赋予了一个值.

我怎样才能做到这一点？我尝试将函数放在控制器的 $postLink() 挂钩中，但是当 $postLink() 触发时，我看到嵌入尚未运行。

另外，我不喜欢弄乱组件的控制器，因为组件非常通用，我把它放在DOM中的几个地方，在它完成创建后只有一个应该运行这个函数。

【问题讨论】：

标签： angularjs angularjs-components

【解决方案1】：

来自 AngularJS 文档中的 "Components have a well-defined lifecycle" 段落：

$postLink() - 在此控制器的元素及其子元素之后调用已链接。类似于 post-link 函数，这个钩子可以是用于设置 DOM 事件处理程序并进行直接 DOM 操作。笔记包含 templateUrl 指令的子元素不会有已编译和链接，因为他们正在等待他们的模板异步加载并且他们自己的编译和链接已经暂停直到发生这种情况。这个钩子可以被认为类似于 Angular 2 中的 ngAfterViewInit 和 ngAfterContentInit 钩子。 Angular 1 中的编译过程完全不同，没有升级时应注意直接映射和小心。

【讨论】：

【解决方案2】：

在 Angular 2 中：

ngAfterViewInit()

在 Angular 初始化组件的视图和子视图后响应。在第一个 ngAfterContentChecked() 之后调用一次。仅组件挂钩。

在 Jquery 中：

$( document ).ready(function() {
        console.log( "document loaded" );
    });

在 javascript 中：

window.onload(function(){
//here
});

在 angular1 中：

angular.element(document).ready(function () {
        //content here
    });

【讨论】：

【解决方案3】：

对于 AngularJS 1 应用程序，在 DOM 初始化后运行函数有两种方式：

您可以立即使用 $timeout - $timeout(function() { /* 调用您的函数 */ });
或者使用 Angular 的 jqLite 提供的 .ready()

【讨论】：

我发现 AngularJS 1 就是这种情况。没有使用生命周期方法或钩子。 $onInit 不保证组件的视图和子视图在 UI 上加载完毕，并且 $viewContentLoaded 不会在组件上使用。