<!DOCTYPE html>

<html lang="zh-CN" ng-app="app">

<head>

    <meta charset="utf-8">

    <title>注册</title>

    <link rel="stylesheet" href="../bootstrap.min.css">

</head>

<body>

    <form name="signup_form" novalidate ng-submit="signupForm()" ng-controller="signupController">

        <fieldset>

            <legend>Signup</legend>

            <div class="row">

                <div class="col-xs-12">

                    <label>Your name</label>

                    <input type="email"

                        placeholder="Name"

                        name="name"

                        ng-model="signup.name"

                        ng-minlength="3"

                        ng-maxlength="20"

                        required>

                    <div class="error" ng-messages="signup_form.name.$error" ng-messages-multiple>

                        <small ng-message="minlength">覆盖模板中的提示不能小于3位</small><!--这样可以覆盖模板中的提示-->

                        <div ng-messages-include="templates/errors.html"></div>

                        <!--或者这样写

                            <ng-messages-include src="templates/errors.html"></ng-messages-include>

                        -->

                    </div>

                </div>

            </div>

            <button type="submit" class="btn btn-default">Submit</button>

        </fieldset>

    </form>

    <script src="../angular.min.js"></script>

    <script src="angular-messages.min.js"></script>

    <script>

        angular.module('app', ['ngMessages'])

        .controller('signupController', function($scope) {

        })

    </script>

</body>

</html>

templates中的代码

<small ng-message="required">必填</small>

<small ng-message="email">邮箱不正确</small>

<small ng-message="minlength">不能小于3位</small>

<small ng-message="maxlength">不能大于20位</small>

以上展示的是实例代码

用法

1.<div ng-messages-include="templates/errors.html"></div>

2.<ng-messages-include src="templates/errors.html"></ng-messages-include>

angularjs使用ng-messages-include实例的更多相关文章

  1. 走进AngularJs(二) ng模板中常用指令的使用方式

    通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的.ng的模板真是让我爱不释手.学习ng道路还很漫长,从模板 ...

  2. 走进AngularJs(八) ng的路由机制

    在谈路由机制前有必要先提一下现在比较流行的单页面应用,就是所谓的single page APP.为了实现无刷新的视图切换,我们通常会用ajax请求从后台取数据,然后套上HTML模板渲染在页面上,然而a ...

  3. 黄聪：AngularJS 动态加载控制器实例-ocLoazLazy

    一.AngularJS动态加载控制器和视图实例 路由配置关键代码: //二级页面 $stateProvider.state('main', { url: '/:name', /**如果需要动态加载数据 ...

  4. AngularJS 表达式中添加过滤器实例

    过滤器可以通过一个管道字符(|)和一个过滤器添加到表达式中 历练实例: <!DOCTYPE html><html><head><meta http-equiv ...

  5. AngularJS入门基础——$provide.decorator 实例讲解

    <body ng-controller="OneController"> <script>  var Foobar = function() {      ...

  6. 跟我学AngularJs:AngularJs入门及第一个实例

    林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 摘要:主要给大家介绍了AngularJs及其特性,并以3个实例来做说明. 本教程使用Angul ...

  7. AngularJS 学习之路（1）

    AngularJS 是一个 JS 框架,适用于以数据操作为主的 SPA (Single Page Application)应用. 不再是 "先查找元素在操作元素",所有操作都以 & ...

  8. AngularJS进阶学习

    参考:http://***/class/54f3ba65e564e50cfccbad4b 1. AJAX:Asynchronous JavaScript and XML(异步的 JavaScript ...

  9. 详解AngularJS中的依赖注入

    点击查看AngularJS系列目录 依赖注入 一般来说,一个对象只能通过三种方法来得到它的依赖项目: 我们可以在对象内部创建依赖项目 我们可以将依赖作为一个全局变量来进行查找或引用 我们可以将依赖传递 ...

  10. AngularJS的初步学习（1）

    AngularJS 是一个Javascript框架.它可通过 <script> 标签添加到 HTML 页面.AngularJS 通过 指令 扩展了 HTML,且通过 表达式绑定数据到 HT ...

随机推荐

  1. 关于 typings install 的使用

    typings 用来管理.d.ts的文件,这种文件是js的一种接口描述,原因是有很多js库并没有typescript的版本. 微软给出一种描述文件,让IDE识别各种js库的代码提示以及类型检查等. 写 ...

  2. android 通过代码设置drawableLeft

    /** * * @desc 设置左边图标 * @param @param drw * @return void */ public void setAlertLeftIcon(Drawable drw ...

  3. GitHub 如何基於 Node.js 和 Chromium 開發 Atom？

    看到回答里, 多数都没有回答到点子上, 还有些给了非常主观的意见而没有给出实际结论和分析过程. 题主的问题有四个: 1. Github 如何基于 Node.js 和 Chromium 开发 Atom? ...

  4. makefile高级用法--使用函数

    makefile高级用法--使用函数 分类: C/C++ 使用函数 ———— 在Makefile中可以使用函数来处理变量,从而让我们的命令或是规则更为的灵活和具有智能.make所支持的函数也不算很多, ...

  5. 【转】Android中Spinner下拉列表（使用ArrayAdapter和自定义Adapter实现）

    原文网址:http://embed.21ic.com/software/android/201403/31603.html 1 :Android中Spinner下拉列表(使用ArrayAdapter和 ...

  6. 【转】Microsoft visio 2013 pro 图文激活破解教程

    原文网址:http://jingyan.baidu.com/article/db55b609ab0e1f4ba30a2ff0.html Microsoft visio 2013 pro 假如您使用Mi ...

  7. Windows服务器Pyton辅助运维--02.远程重启IIS服务器

    Windows服务器Pyton辅助运维 02．远程重启IIS服务器 开发环境: u  Web服务器: Windows Server 2008 R2 SP1 IIS 7.5 u  运维服务器: Pyth ...

  8. EA强大的画图工具---设计数据库表格

    http://blog.csdn.net/senior_lee/article/details/30272169?utm_source=tuicool 关于EA这个优秀的软件是从师哥哪里听来的,自己瞎 ...

  9. ELT工具Kettle之CDC（Change Data Capture）实现实例

    ETL过程的第一步就是从不同的数据源抽取数据并把数据存储在数据的缓存区.这个过程的主要挑战就是初始加载数据量大和比较慢的网络延迟.在初始加载完成之后,不能再把所有数据重新加载一遍,我们需要的只是变化的 ...

  10. Wamp集成环境配置多站点

    一.打开apache配置文件httpd.conf 二.修改httpd.conf配置文件 1.在配置文件httpd.conf中搜索 conf/extra/httpd-vhosts.conf,然后将该行代 ...