Contents
  1. 1. angularjs之directive

angularjs之directive

指令directive的控制器controller、链接link和编译compile

directive指令:

1
2
3
<div class="row">
<jdb-introductionhtml></jdb-introductionhtml>
</div>

directive.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
detailsApp.directive('jdbIntroductionhtml', function(utilsService) {
return {
restrict: 'EAC',
replace: false,
// scope: {},
template: '统计周期:本月(<strong>{{beginDate}}~{{endDate}}</strong>)</p><p style=margin-left:40px></p>',
controller: function($scope) {
console.log("1.directive -- controller");
$scope.beginDate = '0902';
$scope.endDate = "0931";
console.log(utilsService.getPeriod());
},
link: function($scope) {
console.log("2.directive -- link");
$scope.beginDate = '0903';
$scope.endDate = '0909';
},
compile: function($scope) {
console.log("3.directive -- compile");
$scope.beginDate = '0903';
$scope.endDate = '0908';
}
};
});

在chrome Console 看到输出顺序:3.directive -- compile, 1.directive -- controller,发现link并未打印。是link function没有执行吗。

了解下它们之间的区别:



angular对directive指令执行顺序:编译调用compile生成dom对象,再调用link绑定到对应的$scope域(设置事件监听器,监视数据变化和实时的操作DOM.),最后执行controller;

使用场景:

控制器和link函数可以进行互换;控制器主要是用来提供可在指令间复用的行为,但链接函数只能在当前内部指令中定义行为,无法被其它指令间复用;link函数可以将指令互相隔离开来,而controller则定义可复用的行为以供其它指令来调用该指令;

link 对特定元素添加/注册事件、增加功能、使用scope的$watch()或者想要与DOM元素做实时的交互;

简言之,在directive的controller中写的方法操作等可以被暴露出来给其他指令使用;link函数中写的方法只在本指令中使用、有效;compile指令在Angularjs解析我们自定义的HTML标签时最先执行的编译,将自定义的标签进行编译然后进行link或controller 最后产出供浏览器可以识别的DOM进行页面渲染….

参考:

https://stackoverflow.com/questions/24615103/angular-directives-when-and-how-to-use-compile-controller-pre-link-and-post


Creative Commons License
本文由Lomo创作和发表,采用Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License进行许可.
转载请注明作者及出处,本文作者为Lomo,本文标题为angularjs之directive.
Contents
  1. 1. angularjs之directive