Components（生命周期）钩子函数
angular1.5为每个组件提供了生命周期钩子函数去响应不同的时刻，有以下几个钩子：
1、$onInit()：此时 component 构造函数初始化完毕（包括 bindings 中的数据），我们可以使用它来将浮在控制器各个地方的初始化变量集中起来，统一进行初始化操作。
this.$onInit = function () { this.sayHello = "Hello !"; }
2、$onChanges(changesObj)：当 bindings 单向数据变化时会触发这个钩子。父组件向子组件单向传输数据：“@”、“<”。注：双向绑定不出发。
this.$onChanges = function (event) { //该 event 对象中有单向传输的变量及值方便获取 console.log(event); }
3、$doCheck()：每次脏检查会触发的钩子。
this.$doCheck = function () { //每次脏检查都会触发 console.log('check'); } this.$onInit = function () { //组件加载完成初始化 this.num = 0; $interval(function () { self.num = Math.random(); }, 1000) }
4、$onDestroy()：当 controller 的 scope 销毁时会触发的钩子。比如：你使用了 $postLink 来设置了DOM事件监听函数或者其他非Angular原生的逻辑，在 $onDestroy 中你可以把这些事件监听或者非原生逻辑清理干净。
5、$postLink()：当组件及其子组件的元素已经被编译和链接触发的钩子。一个使用场景：tabs 组件中有未知长度的 tabs 数组，而其内 tab 的个数，通过每个 tab 组件初始化后调用 tabs 组件的 add 方法来 push 进 tabs 数组；此时如果想设置默认第几个 tab 被选中，那么只能等待所有 tab页加载完成，才能进行被选中设置。
<!DOCTYPE html> <html lang="en" ng-app="app"> <head> <meta charset="UTF-8"> <title>postLink 与 transclude 合用</title> <script src="angular.js"></script> <style> .selected {color:red}; </style> </head> <body> <tabs> <tab label="Tab 1"> Tab 1 contents! </tab> <tab label="Tab 2"> Tab 2 contents! </tab> <tab label="Tab 3"> Tab 3 contents! </tab> </tabs> <script> var tab = { bindings: { label: '@' }, require: { tabs: '^^' }, transclude: true, template: ` <div class="tabs__content" ng-if="$ctrl.tab.selected"> <div ng-transclude></div> </div> `, controller: function () { this.$onInit = function () { this.tab = { label: this.label, selected: false }; this.tabs.addTab(this.tab); }; } }; var tabs = { transclude: true, template: ` <div class="tabs"> <ul class="tabs__list"> <li ng-repeat="tab in $ctrl.tabs"> <a href="" ng-bind="tab.label" ng-click="$ctrl.selectTab($index);"></a> </li> </ul> <div class="tabs__content" ng-transclude></div> </div> `, controller: function () { this.$onInit = function () { this.tabs = []; }; this.addTab = function addTab(tab) { this.tabs.push(tab); }; this.selectTab = function selectTab(index) { for (var i = 0; i < this.tabs.length; i++) { this.tabs[i].selected = false; } this.tabs[index].selected = true; }; this.$postLink = function () { this.selectTab(0); } } }; angular.module('app', []) .component('tab', tab) .component('tabs', tabs); </script> </body> </html>
这里涉及到组价的另一个属性：transclude，后面会更新其使用。