指令Directive
可以利用指令来扩展HTML的标签(但是不兼容IEE8以下)。
1、指令API
varmyModule = dule("urInfo", []);
myModule.directive("directiveName", function () {
vardirName = {
restrict: string,
template: string,
templateUrl: string,
priority: number,
replace: bool,
transclude: bool,
scope: boolOrObject,
controller: functioncontrollerConstructor($scope, $elm, $attrs, $transclude) { },
require: string,食用油十大品牌
compile: function (element, attrs, controller) { },
link: function (scope, element, attrs, controller) { }
}
returndirName;
});
Directive的API：指定属性参照表：
属性 | 作用 | 备注 |
restrict | 描述指定在模板中的使用方式，如：元素E，属性A，CSS样式类C，注释M | 便携式dvd EMAC |
template | 内联模板 | 二者使用其一 |
templateUrl | 加载模板使用的URL |
priority | 设置指令在模板中的执行顺序（顺序是相对于其他指令而言的） | |
replace | True替换指令所在的元素；fal或者不设置，则把当前指令追加到所在的元素内部 | |
transclude | 把指令元素中原来的子节点移动到一个新模板内部 | |
scope | 为当前的指令创建一个新的作用域（独立作用域） | |
| 节粮 controller | 创建一个控制器，它会暴露一个API，利用API在多个指令之间进行通信 | |
require | 要求必须存在另外一个指令，当前指令才能正常运行 | |
compile | 在使用ng-repeat时，用编程的方式修改最终生成的DOM，实现一个指令跨越多个实例。Compile返回一个link函数 | | 记叙性散文
link | 用编程的方式修改最终生成的DOM，添加事件监听器，并设置数据绑定 | 推荐使用 |
| | |
2、angular的初始化过程
3、指令下的compile和link
compile和link是根据angular创建动态视图的两个处理阶段来命名的。Compile函数的作用是对模板自身进行转换，而link函数负责在模型和视图之间进行动态关联。
3.1 compile和link的区别
1. Compile函数的作用是对指定的模板进行转换；
2. Link的作用是在模型和视图之间建立关联，包括在元素上注册时间监听；
3. Compile只有3个参数，link有4个参数；
4. Scope在链接阶段才会被绑定到元素上，因此compile阶段操作scope报错；
5. 对于同一个指定的多个实例，compile只会执行一次，而link对于指令的每个实例都会执行一次；
6. 一般情况我们只要编写link函数就够了；
7. 如果你编写的自定义的compile函数，自定义的link函数无效，因为compile函数应该返回一个link函数供后续处理；
3.1 compile和link的区别对照表
对比项 | Compile | Link |
作用 | 对自身的模板进行转换 | 模型和视图之间的动态关联 |
执行次数 | 1 次 | 多次 |
执行阶段 | 编译阶段 | 链接阶段 |
参数 | 3个，function（element，attrs，transclude） | 4个，function（scope，element，attrs，controller学龄前儿童） |
| | |
4 实例
HTML：<divclass="container"ng-controller="urs">
<divclass="panel">
<divclass="panel-default panel-heading">
<h1>指令下的compile和link操作</h1>
</div>
<divclass="panel-body">
<h2>请填写信息</h2>
<divclass="write-info">
请输入你的名字：
<inputtype="text"ng-model="urInfo.name"/><br/><br/>
请输入你的手机：
<input磅的英文type="text"ng-model="l"/><br/><br梦见自己染头发/>
请输入你的邮箱：
<inputtype="text"ng-model="ail"/><br/><br/>
</div>
<h2>用户信息</h2>
<divclass="showinfo">
用户信息123
<urinfo>
<div>asdasd</div>
</urinfo>
</div>
</div>
</div>
</div>
JS：
varmyModule = dule("urInfo", []);
ller("urs", function ($scope) {
$scope.urInfo = {
name: "",
tel: "",
email: ""
}
});
myModule.directive("urinfo", function () {
vardirUr= {
restrict: "E"杞人忧天的意思,
template: "<div>name：{{urInfo.name}}<br/>age：{{l}}<br/>Email：{{ail}}<div>",
replace: fal,
link: function (scope, elment, attrs, controller) {
console.log("urinfo下的link:")
scope.urInfo.name = "请输入内容";
}
}
returndirUr;
});
