angular的directive中可以定义新的controller和link函数,也可以通过controller和require属性引用外部的controller和其他directive中的controller以提高重用性
- require会获取其他指令中的控制器并作为link的第四个参数
link: function (scope,elem,attr,ctrl){...} - 前缀^表示可追溯到父指令,?表示即使找不到也不报错,只是返回null
用法1:引用父指令中的控制器,调用一些公共的属性和方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script type="text/javascript" src='./angular.js'></script>
</head>
<body ng-app='myapp'>
<common>
<d1></d1>
</common>
</body>
<script type="text/javascript">
var app = angular.module('myapp',[]);
app.directive('common',function(){
return {
controller: function($scope){
this.method1 = function(){//注意这里要用this
console.log(123)
};
},
}
});
app.directive('d1',function(){
return {
require: '?^common',
link: function(scope,elem,attrs,common){
scope.method1 = common.method1;
scope.method1()//123
}
}
});
</script>
</html>
用法2:require:'ngModel'
- 该指令的标签中必须有ng-model,此时有如下属性和方法:
- $viewValue为视图值，即显示在视图（页面）的实际值
- $modelValue为模型值，即赋给ng-model的值（与控制器绑定的值）
两者不一定相等，因为$viewValue同步到$modelValue要经过一系列的操作（经过三个管道）。虽然大多数情况下两者是相等的。 - ctrl.$parsers
一个数组,参数为函数序列,当用户输入该input使ng-model变化时触发,各个函数依次执行,第一个函数的参数为当前ctrl.$viewValue,之后每个函数参数为上一个函数的返回值(每个函数必须有返回值,否则下一个函数不执行),最后一个函数的返回值作为控制器中的model - ctrl.$formatters
一个数组,参数为函数序列,当该model在控制器中的值变化时触发,各个函数依次执行,最后一个函数的返回值作为ctrl.$viewValue返回给对应input
以上为$viewValue和$modelValue之间同步的管道,使用之后可以使ng-model的view和model两者值不等
不管是$parsers还是$formatters,都只是ng-model和model之间的交互,例如ng-model='hello',传给model中的hello时,数值因$parsers发生变化,然后model中的hello再传给{{hello}},即是变化后的数值,因此input中的值($viewValue)与{{hello}}不等 - ctrl.$setValidity(key,Boolean)
设置一个验证的值,可以直接通过ctrl.$error.key和ctrl.$valid查看,也可以{{myform.myinput.$valid}}和{{myform.myinput.$error.key}}查看
只要$error非空,$valid即为false
<!DOCTYPE html>
<html lang="en" ng-app='myapp'>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script type="text/javascript" src='./angular.js'></script>
</head>
<body ng-controller='con'>
<input type="text" name="" ng-model="myModel">
<input common ng-model='myModel'>
</body>
<script type="text/javascript">
var app = angular.module('myapp',[]);
app.controller('con',function($scope,$timeout){
$scope.myModel=222;
$timeout(function(){
console.log($scope.myModel)
},2000)
})
app.directive('common',function(){
return {
require:'ngModel',
scope:{
ngModel:'='//此处等价于scope:false
},
link:function(scope,elem,attr,ctrl){
console.log(ctrl)
var fn1= function(a){
console.log(1)
return a
}
function fn2(a){
console.log(2)
console.log(a)
return 2
}
ctrl.$parsers.push(fn2)
ctrl.$formatters.push(fn1)
}
}
});
</script>
</html>
