测试表单中的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. Selenium | 网上教程

    java selenium (一) selenium 介绍 java selenium (二) 环境搭建方法一 java selenium (三) 环境搭建 基于Maven java selenium ...

  2. SpringCloud开发学习总结（七）—— 声明式服务调用Feign（三）

    Feign中的Ribbon配置 由于Spring Cloud Feign的客户端负载均衡是通过Spring Cloud Ribbon实现的,所以我们可以直接通过配置Ribbon客户端的方式来自定义各个 ...

  3. css新奇技术及其未来发展

    1.图像替换技术: 图像替换技术是指使用图像替换页面中文本的功能,类似与在页面中插入图像,只是这种方法更为方便,易于代码管理.通常来说,设计者习惯使用有意义的图像去替换一些标题,logo和某些特定的页 ...

  4. 更新项目，uwsgi重新加载和日志文件

    uwsgi --reload /var/run/uwsgi.pid uwsgi.pid是uwsgi进程文件 /var/log/uwsgi.log

  5. C#中分部类和分部方法的应用

    本篇文章介绍了,C#中分部类和分部方法的应用.需要的朋友参考下     分部类(Partial Class)在C#2.0引入,分部方法(Partial Method)在C#3.0引入,这两个语法特性都 ...

  6. CF963A Alternating Sum

    思路:利用周期性转化为等比数列求和. 注意当a != b的时候 bk * inv(ak) % (109 + 9)依然有可能等于1,不知道为什么. 实现: #include <bits/stdc+ ...

  7. calc() 计算CSS属性值

    calc()是css3的一个新增的功能,用来指定元素的长度.比如说,你可以使用calc()给元素的border.margin.pading.font-size和width等属性设置动态值.calc() ...

  8. 最优雅退出 Android 应用程序的 6 种方式

    一.容器式 建立一个全局容器,把所有的Activity存储起来,退出时循环遍历finish所有Activity import java.util.ArrayList; import java.util ...

  9. java操作Excel、PDF文件

    java操作Excel.PDF文件 分享者:Vashon 分享来源:CSDN博客 下面这些是在开发中用到的一些东西,有的代码贴的不是完整的,只是贴出了关于操作EXCEL的代码: jxl是一个*国人写的 ...

  10. php配置之include_path

    在php.ini中配置include_path,可在引入文件时直接引入配置目录下的文件. 项目中就可以直接 引入/var/www/phpxwlib及/var/www/huicuiserver/libs ...