组件完全就绪后执行一个功能

Question

我有一个angularjs组件，它有一个模板，一个控制器，一些绑定，一些被转换的部分。

我将此组件及其属性放在我的DOM中：

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

这些属性值将由组件的控制器和/或组件的模板在某处进行转换。

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

我怎么能做到这一点？我尝试将函数放在控制器的$ postLink（）钩子中，但是当$ postLink（）触发时，我发现转换还没有运行。

此外，我不喜欢混淆组件的控制器，因为组件非常通用，我将它放在DOM中的几个位置，并且只有其中一个应该在完成创建后运行此函数。

Answer 1

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

1. 你可以毫无延迟地使用$ timeout - $ timeout（function（）{/ *调用你的函数* /}）;
2. 或者使用由Angular的jqLit​​e提供的.ready（）

Answer 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
    });

Answer 3

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

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