简介
在我们用Angular开发中，我们必须要知道angular的生命中器，这个在未来的开发中至关重要。
AngularJs生命周期分为两个阶段。
编译阶段： 在编译阶段，AngularJs会遍历整个HTML文档并处理页面上声明的指令，这些指令可能是嵌套。在完成遍历或编译后，会返回一个模版函数，我们可以在模版函数返回之前对编译后的DOM进行修改，在这个时候对DOM进行修改，可以大幅度减少性能花销，因为DOM还未进行数据绑定编译完成，我们可以通过编译函数对DOM进行访问（此时的DOM并未呗渲染到页面中）。
链接阶段：编译完成即进入链接阶段，在链接阶段，数据与DOM进行绑定。
注意：上面两句话非常重要，与学习Vue必须学习Vue的生命周期一样重要
link函数
link阶段负责将作用域和DOM进行链接，我们可以指定link函数，对已经编译的DOM进行一些如事件监听等操作。
link函数可接受三个或四个参数
scope该指令的作用域
ele指令元素
attrs指令上的属性
当指令的require属性被指定 则第四个参数生效，否则为underfined
例子
<body ng-app="myApp">
<my-directive diy="Angular"></my-directive>
</body>
<script>
var app = angular.module("myApp",[]);
app.directive("myDirective",function(){
return {
template: `
<div>
<h1>自定义指令{{name}}</h1>
</div>
`,
link: function(scope,ele,attrs) {
console.log(ele,arrts);//ele是DOM元素，attrs是DOm元素上的属性
scope.name="Angular"；
//angular自带轻量级的jQuery
ele.children().css("background","red");
}
}
})
</script>
require配置项
require参数被用来指定该指令依赖的其他指令
在父子指令或兄弟指令的controller之间的一个桥梁，而require也用恰恰可以用来做指令间的通信
<body ng-app="myApp">
<first-directive>
<second-directive third-directive></second-directive>
</first-directive>
</body>
<script>
var app = angular.module("myApp",[]);
app.directive("firstDirective",function(){
return {
controller: ["$scope",functiom($scope){
$scope.firstName= "first";
this.info = {
name: $scope.firstName,
age: 25
}
}]
}
}),
app.directive("secondDirective",function() {
return {
template: `
<div>
<h1>第二个指令</h1>
</div>
`,
require: "?^thirdDirective"
link: function(scope,ele,attrs,ctrl) {
console.log(ctrl.name)
}
}
})
app.directive("thirdDirective",function(){
return {
restrict: "A",
require: "?^firstDirective",//?本级^上级 本级或上级查找
link: function(scope,ele,attrs,ctrl){
console.log(ctrl.info)
},
controller: ["$scope",function($scope){
this.name = "thirdDirective";
}]
}
})
</script>
不积跬步无以至千里,不积小流无以成江海
网友评论