angular指令心得(ng-model)
在项目中编写指令,常常会依赖其他的指令来实现想要达到的功能,其中最常用到的便是ng-model,它为我们明确了需要绑定的属性,虽然在指令中可以通过通过使用独立作用域的”=”来进行双向绑定,但使用ng-model更能简化指令的传值,符合angular的使用习惯。
指令依赖
angular中编写自定义指令是通过require属性来指定查找依赖指令的controller,并传入link函数中进行调用.
.directive("...",function(){
return {
...
require:'ngModel',
link:function(scope,elem,attr,ngModelCtr){
...
}
...
}
})
所依赖指令的控制器被传入link的第四个参数中,可以依赖多个指令,此时第四个参数则是个数组。
.directive("...",function(){
return {
...
require:['ngModel','^?form',...],
link:function(scope,elem,attr,ctrls){
...
}
...
}
})
在查找指令的过程中,如果未找到指令,则会抛出一个编译错误。
可以通过加前缀来控制其查找的操作。
前缀 |
作用 |
^ |
向上查找指令,未找到则报错。 |
? |
未找到,取消报错,将null传到link的第四个参数。 |
ng-model
使用ng-model前,让我们先简单了解一下ng-model的工作原理。
angular是一个mvvm的框架,其主要就体现在ng-model身上
angular将model和view之间的联系切断,自己内部通过ng-model去实现ViewModel层,具体的细节不表,我们就看下我们要用的部分。
在每个使用ng-model的地方,都会创建一个ngModelController实例,这个实例负责管理存储在模型(由model指定)中的值与元素显示值之间的数据绑定。
ngModelController包含有$formatters和$parsers数组,会在每次更新数据绑定是调用。
当我们从页面或通过$setViewValue改变绑定的属性时,会遍历执行$parsers数组里面的方法,而当我们直接在js里面通过赋值语句修改时,则会调用$formatters数组。
// line number:25332
// model -> value
// Note: we cannot use a normal scope.$watch as we want to detect the following:
// 1. scope value is 'a'
// 2. user enters 'b'
// 3. ng-change kicks in and reverts scope value to 'a'
// -> scope value did not change since the last digest as
// ng-change executes in ap