表单中的ngModelController
2024-09-30 12:22:08
测试表单中的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。得证
最新文章
- Qt容器类——1. QList类、QLinkedList类和QVector类
- 【团队分享之二】IT团队绩效提升的一些见解
- 安装PHPStudy2014,打开端口出现80端口 PID4 进程:System-windows服务器应用
- Lua包管理工具Luarocks详解 - 15134559390的个人空间 - 开源中国社区
- angularjs-googleMap googleMap api地址解析与反解析
- java.lang.IllegalArgumentException: Timestamp format must be yyyy-mm-dd hh:mm:ss[.fffffffff]
- #include<;math.h>;
- Java乔晓松-android中获取图片的缩略图(解决OutOfMemoryError)内存溢出的Bug
- 【java】io流之字符输入流:java.io.Reader类及子类的子类java.io.FileReader
- 使用visualStudio2017创建一个简单的控制台程序
- ConcurrentHashmap详解以及在JDK1.8的更新
- 关于wordpress慢的问题
- spring boot集成 servlet自动注册的两种方式
- 用conda创建python虚拟环境
- SPOJ ADAFIELD Ada and Field(STL的使用:set,multiset,map的迭代器)题解
- kubernetes 无法删除 pod 问题的解决
- 38初识xml
- dsh安装指南
- JSP页面生成验证码功能
- 已知一个数组a[N]来构造数组b[N]的有趣算法题
热门文章
- bzoj1257[CQOI2007]余数之和(除法分块)
- video.py OpenCv例程阅读
- Java | 基础归纳 | Gson &;&; Json
- [HNOI2018]毒瘤
- 将picpick汉化及矩形截屏
- 131 Palindrome Partitioning 分割回文串
- Spark MLlib编程API入门系列之特征提取之主成分分析(PCA)
- 【前端】Html5浏览器缓存 sessionStorage 与 localStorage
- AJPFX辨析Java中运算符 ++ 和 += 的区别
- UVa OJ 458