测试表单中的ngController。直接看红字结论部分即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="angular-1.5.5/angular.js"></script>
</head>
<body ng-app="app">
<form name="f">
<input required type="text" name="addr" ng-model="addrModel" xx>
{{f.addr.x}}
{{f.addr.$error.required}}
</form>
<script>
var app = angular.module('app',[]);
app.directive('xx',function(){
return {
require:'ngModel',
link:function(scope,ele,attr,ctrl){
ctrl.x = 'custom value';
}
}
})
</script>
</html>
以上两个值能正常显示。得出 f.addr实际上就是addrModel上的ngModelController，继续测试，对以上例子进行改造：
<form name="f">
<input required type="text" name="addr" ng-model="addrModel">
<div xx ng-model="addrModel"></div>
{{f.addr.x}}
{{f.addr.$error.required}}
</form>
运行结果：只显示一个true，那个custom value就不显示了。那是因为每一个ngModel指令即使关联的是同一个model，ngModelController也是不同的，验证如下：
<body ng-app="app">
<form name="f">
<div xx ng-model="addrModel"></div>
<div xx ng-model="addrModel"></div>
</form>
<script>
var app = angular.module('app',[]);
app.directive('xx',function(){
return {
require:'ngModel',
link:function(scope,ele,attr,ctrl){
console.log('get ' + ctrl.x)
ctrl.x = 123;
}
}
})
</script>
输出两个undefined。得证