<!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. 转载：Struts2.3.15.1升级总结

    转载网址:http://blog.csdn.net/amosryan/article/details/10350481 由于大家都懂的原因,涉struts2的项目需要将struts2相关包升级至2.3 ...

  2. python MySQLdb、socket与进线程

    1 centos下 安装MySQLdb模块 a 首先需要先安装 setuptool b yum install -y mysql_devel 头文件 c yum install -y python_d ...

  3. pyenv简介——Debian/Ubuntu中管理多版本Python

    pyenv简介——Debian/Ubuntu中管理多版本Python MAY 21ST, 2016 12:00 AM | COMMENTS pyenv是管理Python版本的工具,它支持在多个Pyth ...

  4. 『局域网安全』利用ARP欺骗劫持Cookie

    0x 00 ARP欺骗说明 欺骗原理相关内容就不多叙述了,百度一大堆 实施ARP欺骗在Windows下,Linux下都相关工具 由于在Linux下可以开启ip_forward功能,个人认为Linux下 ...

  5. static class

    http://msdn.microsoft.com/zh-cn/library/79b3xss3(VS.80).aspx 不可被继承

  6. clone database and rename

    使用 management studio right click database -> Tasks -> Generate Scripts -> next until " ...

  7. VS2013中使用GDI+绘图

    VC范例,400多个例子源代码下载 http://download.csdn.net/detail/bigtree_mfc/7727977 VS2013中使用GDI+绘图和VC6.0不同,在VC6.0 ...

  8. SSL 证书申请（居然还可以在淘宝上购买）

    免费的目前有 2 个国内的:免费SSL证书申请国外的:StartSSL™ Certificates & Public Key Infrastructure 备注:其实,国内的这家的根证书,也是 ...

  9. qt-solutions提供了8个开源项目

    其实这是官方提供的源代码,至于为什么会另建项目,而没有整合到QT项目里去,我猜可能有2个原因: 1. 这几个项目本身不完善,并且也不是QT项目的核心,因此没有必要花精力去完善 2. 一定程度上可以维护 ...

  10. MVC4.0中ViewBag、ViewData、TempData和ViewModel几种传值方式的区别

    MVC框架实现了数据的分离,使页面看起来更加的简洁,MVC4.0中Controller和View的数据传输有上边这几种方式,今天我们来探讨下这几种方式的却别. 一:ViewBag和ViewData V ...