测试表单中的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。得证

表单中的ngModelController的更多相关文章

  1. jQuery中设置form表单中action的值的方法

    下面介绍在jQuery中设置form表单中action的值的方法. $("#myFormId").attr("action", "userinfo.s ...

  2. 实现滑动条与表单中的input中的value交互

    最近在写一个考试系统的项目,遇到一些比较有意思的小知识,在这里分享给大家 下面是一个滑动条与input中的value值的交互,即滑动条的颜色会跟随给定input的value值实时变化,虽然表单中的ra ...

  3. Form表单中的get和post的区别

    method="get/post",两种方式的区别 Form中的get和post方法,在数据传输过程中分别对应了GET和POST方法.二者主要区别如下: 1.Get将表单中数据的按 ...

  4. jQuery中设置form表单中action值与js有什么不同。。。。

    jQuery中设置form表单中action值与js有什么不同.... HTML代码如下: <form action="" method="post" i ...

  5. form表单中enctype="multipart/form-data"的作用

    在我们使用php导入和导出excel表格的时候经常会见到 enctype="multipart/form-data",哪他的作用是什么呢? ENCTYPE="multip ...

  6. jsp中的form表单中的 id和name有什么区别了

    <form action="./system/WebServer_webServerLogin" method="post" id="login ...

  7. juery与表单中name="nodeName"引起的冲突

    引入jquery时,表单中如果有name="nodeName"的表单项,会有一些奇怪的冲突. 表单HTML代码如下: <form id="formAddEquipN ...

  8. 如何在启用SharePoint浏览器功能的InfoPath 表单中添加托管代码以动态地加载并显示图片

    InfoPath 的浏览器表单不支持加载并显示图片,当然在模板中可以插入图片,但是如果想显示数据库的一幅图片,或是动态加载一张图片就无能为力了. 基实这个问题可以通过在浏览器表单中使用: " ...

  9. Form表单中的action路径问题，form表单action路径《jsp--->Servlet路劲问题》这个和上一个《jsp--->Servlet》文章有关

    Form表单中的action路径问题,form表单action路径 热度5 评论 50 www.BkJia.Com  网友分享于:  2014-08-14 08:08:01     浏览数44525次 ...

随机推荐

  1. bzoj4472: [Jsoi2015]salesman（树形dp）

    Description 某售货员小T要到若干城镇去推销商品,由于该地区是交通不便的山区,任意两个城镇之间都只有唯一的可能经过其它城镇的路线. 小T 可以准确地估计出在每个城镇停留的净收益.这些净收益可 ...

  2. 洛谷P4199 万径人踪灭（manacher+FFT）

    传送门 题目所求为所有的不连续回文子序列个数,可以转化为回文子序列数-回文子串数 回文子串manacher跑一跑就行了,考虑怎么求回文子序列数 我们考虑,如果$S_i$是回文子序列的对称中心,那么只要 ...

  3. 基于 React-draft-wysiwyg 实现的 react 富文本编辑器组件 开箱即用

    工作中遇到了一个需要做图文详情 的富文本编辑的需求, 于是基于 React-draft-wysiwyg 实现了一个 纯组件, 目前支持 常规文本输入 外部链接图片 以及本地上传图片, 由于是纯组件, ...

  4. PMD - Avoid autogenerated methods to access private fields and methods of inner / outer classes

    PMD错误 Avoid autogenerated methods to access private fields and methods of inner / outer classes 样例 p ...

  5. Selenium | 基础入门 | 截屏并保存于本地

    可先参考   Selenium | 基础入门 | 利用Xpath寻找用户框 核心代码: //截屏操作 File srcFile = ((TakesScreenshot)driver).getScree ...

  6. git for mac

    Git 使用 1.下载完成后打开终端,使用git --version或者which git命令查看安装版本,有就是安装成功了. 2.创建一个全球用户名.全球邮箱 git config --global ...

  7. Little Elephant and Elections CodeForces - 258B

    Little Elephant and Elections CodeForces - 258B 题意:给出m,在1-m中先找出一个数x,再在剩下数中找出6个不同的数y1,...,y6,使得y1到y6中 ...

  8. Python Unicode and str

    http://stackoverflow.com/questions/18034272/python-str-vs-unicode-types unicode is a character set. ...

  9. C#中构造函数和析构函数区别

    把对象的初始化工作放在构造函数中,把清除工作放在析构函数中.当对象被创建时,构造函数被自动执行.当对象消亡时,析构函数被自动执行.这样就不用担心忘记对象的初始化和清除工作. 析构函数是由垃圾回收器控制 ...

  10. 访问github.com太慢的解决方法

    修改 c:\windows\system32\drivers\etc\host文件添加 192.30.255.112 github.com 151.101.72.249 github.global.s ...